Fluent Conf 2017

Last month I had the opportunity to go to the Fluent conference and hear from the experts the best advice, recommendations, and new technologies related to the vast world of JS and CSS. In my brief experience, some of the biggest problems about starting to work on the frontend side is the high number of libraries, frameworks, and patterns we find on the internet; and sometimes, using the latest frameworks and “best practices” isn’t the best choice when you are building a system. This is why this article is not pretending to tell you what to implement to start a project, nor is trying to persuade you to use a specific technology or framework (I don’t have this level of persuasion though :D ). this summary is a bunch of advice from the conference that I found useful and perhaps it could suit your needs.

About the conference, let me start telling you that it exceeded my expectations. Without a doubt it was an awesome experience, but like every conference, it’s just an appetizer. It’s our duty to research about the topics we want to learn. Without further ado, here is my summary.

Styled-components

This quote explains perfectly what a styled-components library is:

If you’re writing React, you have access to a more powerful styling construct than CSS class names. You have components.

Michael Chan, @chantastic

That’s the main idea of styled-components, to use the power of JS ES6 and CSS to build components, allowing to remove the mapping between components and stylesheets.

In the past, we tried to build components with this approach, and I remember that we discussed a lot about what approach was better, inline styled components or class styled based components, winning the latter, mainly because it allows to overwrite the style of the component when we’re re-using it. Also, the inline style components approach has the problem of adopting responsive design, and the inability to use the easy tools that CSS provide us.

Now, styled-components give us the ability of using full CSS tools such as pseudo-selectors, nesting (like pre-compilers), media queries, etc; Also, with this library, the use of css-pre-compiler tools are totally unnecessary. You could think: “wait a minute, so what about the mixins, variables, operators, and all the stuff that compilers give us to build css stylesheets?”, well, you have JS, functions, variables, and all you can imagine when building your styles.

Here is a list of best practices mentioned by one of its creators during the conference:

• Remove the mapping between styles and components
• Remove the mapping between DOM and styles (classes)
• Components should be adapted based on props
• Write actual CSS
• Build small focussed components

There is a lot of things you can do with styled-components. If you feel curious about this library, here is the link:

styled-components

Loopback

This was one of the most interesting frameworks I saw in the conference. LoopBack is a node.js framework that enables us to create REST APIs dynamically, based on express.js and using MongoDB as the database storage system. This tool developed by IBM offers an easy and quick way to build APIs with a strong engine. BTW it’s totally free.

There are two things in our company that makes me think maybe this framework is something that we could start to use.

1. Hapi.js is the framework that we’re using currently to build all our APIs, but the documentation is poor, and sometimes a little hard to understand.
2. It’s a quick and easy way to build microservices.

If you are interested in this framework, check out this link:

LoopBack - Node.js framework

Push notifications for web apps

Everybody has heard it before, but I’m pretty sure that we’re not thinking about the benefits of applying this kind of approach to the sites we’re building.

Web push notifications give web applications the ability to receive message pushed to them from a server at anytime. The main target is to engage users with urgent and relevant notifications motivating them to return to the application.

Olga Petrova (sencha)

Push notifications give a huge commercial value to the business:

1. Increase of user engagement
2. Increase of web app value
3. Replacing a native app with a web app

There are other kinds of real-time communication technologies like Web Sockets used in the past. The main benefits to using Push notifications instead of Web Sockets is that you don’t need to have the browser active, even opened to receive the messages or notifications.

The implementation of this technology isn’t easy and also is not supported by all browsers yet, but it’s close, and is something that we should keep in mind for the not too distant future.

If you want to read more about PN, take a look at these links:

Push API

Encryption library:

web-push-libs/web-push

Progressive web apps

Native Apps are Doomed

Eric Elliott

Maybe all of you know the concept of PWA, but here are some of the characteristics that an app should have to be considered built with progressive enhancement as a core tenet.

Progressive, an app that works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.

Responsive, for desktop, mobile, tablet, laptop or whatever comes next.

Connectivity independent, enhanced with service workers to work offline or on low-quality networks (we’re so far from this lol).

Feels like an app because the app shell model separates the application functionality from the application content.

Re-engagable. Makes re-engagement easy through features like push notifications.

Installable. Allows users to add apps they find most useful to their home screen without the hassle of an app store.

Linkable. Easily share the application via URL. It doesn’t require complex installation.

Discoverable. It’s identifiable as an “application” thanks to the W3C manifest and service worker registration scope, allowing search engines to find it.

The way to give this behavior to our applications is the manifest.json file, so, It all starts with:

<link rel=”manifest” href=”manifest.json”>

There is a lot of things to say about PWA, the implementation of this approach is a set of practices, some of them we already know like the responsive design, and others are totally new for us like the push notifications, but it’s something that we should start to keep in mind and apply step by step.

Hope you found this article useful.. If you want to know more about how this conference went, feel free to comment or ask me directly.