Select Page
JavaScript related technologies

OK. are you a web developer or maybe a wanna be? If so, you probably relate with all the articles about JavaScript Fatigue, JavaScript Fatigue Fatigue, The Deep Roots of JS Fatigue, and Getting Out of JavaScript Fatigue among others.

Too many tools, too many generators, too many APIs, too much configuration…and the list goes on and on. All of this make the life of new JavaScript (and some old timers too) developers very complicated.

Maybe you are a web developer using back-ends such as Ruby on Rails, PHP, .NET, or JAVA, and you create web apps rendering the HTML server side, and you are listening of the cool things you could do building single page apps using JavaScript. If you are a WordPress developer, you may want to get ready to use the WP REST API to render the data client side. So, even though you have been developing apps, plugins and more you don’t know much about JavaScript yet, and you are trying to decide what you need to learn and what path you have to take in your journey,

Read on… I will try to synthesize this whole thing for you… somehow.

But first let me tell you my story.

I used to work with Adobe Flex and Adobe AIR a few years ago. It was a powerful front-end platform to build single page web apps, mobile apps (via AIR) and desktop apps – Windows and Mac OS (via AIR too). However, when Steve Jobs decided to kill Flash, we (I and most other Flex developers out there) decided to move on to new pastures. In most cases that was to JavaScript. Since both Actionscript (the language in Flex and Flash) and JavaScript are based on EcmaScript, the transition was supposed to be simple. Right?

Wrong!

Even then, there were too many options on the JavaScript ecosystem. I started to look at Backbone, Ember and other MV* frameworks and I wasn’t sure what to choose. Furthermore, I wanted to be able to integrate a complete solution, so I was looking from backend alternatives as well. I spend some time learning Ruby, just to discover that I needed Ruby on Rails. After trying learning too many things I decided to focus on more specific libraries, such as D3. After all one of my main interests was around interactive visualization. So I could build the whole visualization with D3.js and have the data coming from a Google spreadsheet or something.

Then I decided to forget the back-end to try a back-end as a service. So, I looked at things such as StackMob and Parse. Both were really promising. StackMob was acquired by PayPal and then discontinued, while Parse was bought by Facebook and then shot down as well.

In 2013 I found Meteor.js which showed some promise. It handled both the front end and the back end (full stack) using only JavaScript, and it was simpler than anything I tried before. The simplicity, in a sense, was due to the fact that it was very opinionated. It only worked with MongoDB; the view layer was handled by Blaze (before they had Spark), which has a very easy to understand templating system. Besides being an easy to learn full stack platform it was real time as well. It was magical.

However, as with everything with technology, things evolve quickly. Angular and React were advancing and becoming more popular. Other real time libraries/frameworks were becoming available. Again more choices everywhere… more confusion. AGG.

If you are following JavaScript news (from any newsletter, or blog) probably you have seen The State of JavaScript survey results produced by Sacha Greif.  In this document, he covers a number of categories, so I will follow the same path and summarize some of his findings.

Learn how to create web apps with Meteor & React

Gilbert Mizrahi
Learn how to create real-time applications using only JavaScript by creating a full polling app

JavaScript Flavor

First, although the majority have used plain JavaScript, many have worked with ES6 and the majority who hasn’t are interested on it. So, it seems ES6 is something you should learn if you want to keep up with the times. If you are just starting, I recommended learning plain JavaScript and ES6 and probably skip CoffeScript and other flavors. I didn’t see any mention of jQuery on the survey, but my guess is that it is becoming less popular.

Front-End Frameworks

On the front-end frameworks, React is by far the leader. Angular 1 is also popular, but a large proportion of people who have used it before, would not use it again. Maybe is because now Angular 2 is out there, I don’t know. Angular 2 is still very new, but 43% of the people that took the survey are not interested in learning it. Ember and Backbone are lagging behind, even though they are the more mature ones. Interestingly Vue is generating a lot of interest.

Full-Stack Frameworks

According to the survey, Meteor is known by 90% of all the respondents. However, the MEAN stack (Mongo + Express + AngularJS + Node.js) is used by many more developers than Meteor, and the satisfaction level is higher with 66% for MEAN vs. 59% for Meteor. The MERN (Mongo + Express + React-Redux + Node.js) is still knew and the majority never heard of it (81%), but the ones who have used it seem very satisfied (86%). Now, since 43% o developers are not interested in Angular 2, I guess the MEAN stack will get less popular. We will see.

Other full-stack frameworks such as FeatherJS and DoneJS are not getting much traction.

If you are interested in Meteor, you should probably learn React and/or Angular 2. The view layer can be handled with Blaze as well, but is getting less interest lately as both React and Angular are officially supported. There are packages to integrate Vue with Meteor also. However, those packages are community supported (not by the MDG). One advantage of Meteor over the other stacks is that the project setup is simplified, because you don’t have to know how to use task runners. I think some developers have moved on from Meteor, because the rate of change was too much or because they have concerns about scalability or how to integrate with other databases. These are my speculations since these were not asked and captured on the survey and are based on what I have read on the forums.

If you are thinking on working with the MEAN stack. Probably you will have to learn (if you don’t know by now) Angular 1 and /or Angular 2, Typescript, and task runners such as Bower, Gulp and Grunt.

Finally, if you are interested to work with the MERN stack, you should learn React, Redux (state management) and Webpack.

State Management

If you are a web developer wanna be, I can hear you saying...WHAT…?

Yeah, state management is sort of a new category in JavaScript. Depending on your choice of stack, you may not need one at this moment.

In this category, Redux is by far the most popular. In React, global state management is important and most developers are aware of Redux.

API Layer

More stuff? Really? This web development stuff with JavaScript is hard, isn’t it?

An API layer offers a decoupled interface to data and/or functionality of one or more applications. It provides a common, language-agnostic way of interacting with an application.

According to the survey, REST APIs are the most common and well known of the bunch.

In the survey, Firebase is listed as an API layer, but I think is more a back-end as a service. Sort of what Parse was. It seems it is getting some good traction. It has a free plan to start experimenting and it allows to deal with real-time database, authentication, messaging, storage, hosting and more. It’s a product of Google, so it gets brownie points just for that.

Besides, developers can work not only with JavaScript, but also with Swift, Objective-C, Java and C++.

Next in line is GraphQL,which is being developed by Facebook. According to http://graphql.org/, GraphQL is a query language for APIs and a run-time for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Personally, I think the philosophy of GrapgQL is very promising, Currently it’s not very popular, but a lot of developers are interested to learn how to use it (76%).

I think in the short term Firebase will grow more than GraphQL, Apollo, Falcor and Horizon, because Firebase has a clearer value proposition, as expressed by Sacha himself: back-end as a service – It takes care of the back-end so you don’t have to.

Then, there is Falcor.js, which, according to its website,

Falcor is a data platform that powers the Netflix UIs. Falcor allows you to model all your backend data as a single Virtual JSON object on your Node server. On the client you work with your remote JSON object using familiar JavaScript operations like get, set, and call. If you know your data, you know your API. Falcor is middleware. It is not a replacement for your application server, database, or MVC framework. Instead Falcor can be used to optimize communication between the layers of a new or existing application.

It sounds like is similar to GraphQL, isn’t it? Well according to this post, there are some important differences. Both tackle data querying and management in JavaScript development, but have different approaches in the implementation. Probably the biggest one is that Falcor is not a query language.

Next in popularity is Apollo. First, what is Apollo? According to Apollo Stack.

Apollo is an incrementally-adoptable data stack that manages the flow of data between clients and back-ends. Based on GraphQL, it gives you a principled, unified, and escalable API for developing modern apps on top of services.

So it’s the implementation of GraphQL made by the Meteor Development Group (MDG). So, you may think… what is this thing…exactly? right!

Next is Horizon. It is a real-time, open-source back-end for JavaScript apps. Horizon is distributed as a standalone server for browser-based JavaScript apps. When you’re ready to write custom back-end code, you can load the Horizon modules directly in Node.js. RethinkDB is bundled with Horizon, so you can make direct database queries on the back-end using the powerful query language ReQL, for flexible joins, aggregations, binary file support, and rich querying.

Now I hear you saying:
Oh boy, do I need to learn how to work with another database (RethinkDB)?

Of course, if you see the results of the survey, you will see that developers mentioned many other API layers.

I think in the short term Firebase will grow more than GraphQL, Apollo, Falcor and Horizon, because Firebase has a clearer value proposition, as expressed by Sacha himself: back-end as a service – It takes care of the back-end so you don’t have to.

But if you want to control your own back end, it seems than sooner or later you will want to play around with GraphQL and Apollo. Even though Falcor is better known than Apollo, I think Apollo will be more popular soon. I see Horizon more of a full-stack framework than an API layer.

CSS

Yeap. If you want to develop or learn to develop web apps (and mobile apps and desktop apps using JavaScript) you will need to learn how to write and handle your CSS.

And yes CSS is a complicated mess too. There are many options including preprocessors that extend CSS capabilities, such as SASS, LESS, CSS modules, Stylus, PostCSS and more.

All of them have some decent learning curve as well.

On top of that you may consider using a CSS framework such as Bootstrap, Material UI, Foundation, etc.

If you are using React, you may choose to style your apps using CSS in JavaScript. So again options and more options. Gulp!

Build Tools

Webpack is the one that has the highest interest. Grunt, Gulp and Browserify are still popular, but are losing ground.

Are there more things to consider?

If you read the survey results you will see that there are other categories, such as testing, mobile frameworks and more. However, let’s suppose you are reading this to try to figure out what to learn and what path to choose. So, for now you can skip the other sections. This doesn’t mean you shouldn’t care about testing and other stuff. But at least you can postpone those things for latter and try to be less overwhelmed:)

So, what I should learn…you may ask

Well, as with everything it depends where in the journey you are right now and what are your goals.

Entrepreneur/newbie web app developer

If you are an entrepreneur or someone that knows little JavaScript, HTML and CSS and your goal is to develop a working prototype or MVP (Minimum Viable Product), probably the best path is:

Learn plain JavaScript. No matter what, you need to understand at least the basic concepts of JavaScript. Don’t worry about jQuery.
Learn the key features of ES6, such as variable declarations, arrow functions and Destructuring Assignment.
Learn HTML5.
Learn the basics of CSS.
Then, choose a JavaScript framework. Forget Backbone or Ember, and focus on either React or Angular 2. My recommendation is to go with React.

Even though some developers think React is counter-intuitive, because of the way it deals with HTML in JavaScript, its component-based architecture is awesome. First, it allows to modularize apps in a way that makes sense. Second, it supports a unidirectional data-flow, typically from parent to children.

In my particular case, I went from Flex to Meteor, and when people started talking about using React (or Angular) instead of Blaze, I was very hesitant to learn either one of them. I wanted to focus on results, not in learning more libraries/frameworks. However, as it was clear that the future was not with Blaze, I decided to explore React. Angular was in transition from Angular 1 to Angular 2, so React was a clearer choice.

I got React very quickly. Philosophically it feels very similar to Flex and it’s way easier to maintain than Blaze.

Next, you can choose a stack. To make it as simple as possible to start, I recommend using Firebase if you don’t want to deal with the back-end, or Meteor if you want to control the whole thing.

The nice thing with Meteor is that you don’t have to care about task runners/build process. So, you will have less things to learn and worry about. And if you decide to use React or Angular to create and render the components, all that knowledge is transferable to other stacks.

With Meteor most of the work is done in the front-end. So, depending on your app, the server side stuff will be as little as 5% of the effort.

Horizon seems interesting as well. It seems easy enough to get started, but my main concern is that since their approach is a little different, if you want to change your stack latter, for whatever reason, you will have to start almost from scratch..

Developer moving to JavaScript

If you are a developer. probably you want to learn stuff that will make you more valuable in the market place. That means you should try to learn and keep learning to work with the frameworks, libraries and stacks that are on high demand and/or tend to be in high demand in the near future.

So, you should be good with ES6 and start learning ES7. Furthermore, you should pick React and/or Angular 2 and the related stack, MERN or MEAN respectively. If you are not yet familiar with any of them take the Meteor route. That will allow to be up to speed sooner.

You should continue learning, what is popular today may not be popular tomorrow. GraphQL and Apollo are going to be a big thing. You should start learning them as soon as possible as well. That will make you more valuable to employers.

Learn how to create web apps with Meteor & React

Gilbert Mizrahi
Learn how to create real-time applications using only JavaScript by creating a full polling app

Conclusion

Technology stacks change all the time and there are too many choices. That is particularly true in the JavaScript ecosystem. A few years ago, most frameworks were based on Model View Controller (MVC or MV*) patterns adapted from back end development. Nowadays it tends to be more component-based architecture.
In order to keep up-to-date, developers need to understand the trends and follow the ones that could make more sense to them according with their goals: produce working prototypes as quick as possible and adapt after identifying a market – product fit for entrepreneurs; or develop the right skills to be marketable for developers than want to be offering value in the marketplace.

What do you think?
Does this writing helps you somehow or it adds to the confusion?
Please let me know below on the comments.

Subscribe to MeteorLife  Blog

Subscribe to MeteorLife  Blog

Get notifiied when new content is available as well as when we launch special promotions for our course  Create Web Apps with Meteor & React

Thanks. You have successfully subscribed!