Sessions is temporarily moving to YouTube, check out all our new videos here.

ember-content-placeholders

Michał Sajnóg speaking at EmberFest in October, 2017
84Views
 
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Lighting Talk on composable components for rendering progressive content.


Transcript


Hi guys. Few words about me, my name is Michal Sajnog. I'm a Senior Front End Developer in Netguru. And I am not a speaker type of guy but I do love Open-source and that's what I spend most of my free time on. So I'm happy to speak about some things that I created recently. So you've all probably heard of Skeleton UI, Greeking, Placeholders, Progressive content, Fake content and so-on and so-on. These things all boil down to a very simple concept of displaying a simplified view while the real data is being fetched in the background. And all major companies that care about the UX of their applications already use this technique, and among them, Facebook, Instagram, Twitter and so-on. You can-- yeah, example on LinkedIn, that's how it looks like. I hope you can see and the contrast is okay. Kumar, earlier today, is a friend of mine, who talked about UX and that it is a Front End Developer's responsibility. So I was doing a proofreading of his presentation like, few days ago, and while doing so, I thought that-- I started to wonder if there is an easy way to actually achieve this effect in Ember. And I started to look for a solution and unfortunately, or fortunately for me, I couldn't find any. So I decided to create one, and a few hours later I created Ember Fake Content add-on, which I announced on EmberJS Community, Slack. And like, two hours later or so, after short discussion I chose to rename this plug-in and called it ember-content-placeholders. And it's essentially a plug-in that contains a composable components that make it possible to achieve this effect effortlessly. You can find it on Github and use it already and take advantage of better UX in your applications while using it. It all comes down to a simple ember instal command, as usual. And yeah, a few examples. So let's say you have to load a list of items with a simple heading for some image and then few lines of text, we can use a content placeholders component with some contextual components inside, with heading and text with some additional properties if you want. And, we have this out of the box without having to worry about pretty much anything. Another simple example, let's say we have a-- we want to display a full image in our items, like some kind of cart, as well we can do this, so there's an image component. And a more complex example, with some other elements, we can arrange them as we want. Each one of those components that's is sealed can take specific properties, but some of the properties are-- that we cannot, on the content placeholders component, the vupper component, are automatically being passed down to the children components thanks to the yield that I do on the add-on itself. And yeah, if you want to find more about it, I encourage you to check the repository. It's not only-- like, if you like to change colours, or spacings, or anything else, I used a CSS so you can override those variables very easily. And if you have any questions, feel free to find me after the Lightning Talks session and that's pretty much it. Danke schoen.