.svg){kind=logo}
As JavaScript's popularity continues to grow and with it, the surrounding ecosystem of modern libraries & tools, it can sometimes be hard to keep-up, leading to what some describe as JavaScript Fatigue. This post will delve into some of the advances we're seeing in the JavaScript community and how such solutions may benefit you and your team, without making you fatigued.
As JavaScript's popularity continues to grow and with it, the surrounding ecosystem of modern libraries & tools, it can sometimes be hard to keep-up, leading to what some describe as JavaScript Fatigue. This post will delve into some of the advances we're seeing in the JavaScript community and how such solutions may benefit you and your team, without making you fatigued.
Frontend
2015 was undoubtedly a big year for Facebook's React; with many large companies adopting React (such as The New York Times, Netflix, Airbnb, Instagram etc.) it's hard to ignore. So what makes React a great choice for your front-end? For starters, React is damn fast. This is achieved via a virtual DOM diff with the DOM and batch updates to patch only the parts of the DOM that need updating. React allows you to build small, reusable components that encompass the template and the JavaScript logic behind them. Of course, this requires the use of a build-tool such as Webpack (and various other tools). It is this need of additional tooling and the advances within this space that has a lot of developers feeling overwhelmed.
React, being just the view layer, requires additional libraries which you generally tend to piece together yourself, however, there are many boilerplate projects available that have all of this ready to go out of the box, the React Starter Kit being one of them.
The killer features of React are ‘universal rendering’ and ‘React Native’.
‘Universal rendering’ means that our web application can be rendered on the server and on the client, all from the same codebase. This eliminates any SEO concerns typical of client-side JavaScript apps without having to resort to solutions such as PhantomJS or Prerender.io.
‘React Native’ allows you to target mobile platforms with a true native app using JavaScript. Unlike hybrid mobile apps that typically employ webviews within a native shell, React Native compiles your app down to a true-native app for iOS & Android. If you're already using React in your web-stack, employing React Native to cater for mobile would make perfect sense.
Learning Resources: Web Bos has created a fantastic React course called React For Beginners. Once complete, Egghead.io offer videos on some more advanced techniques.
Google haven't had the easiest of paths upgrading Angular from 1.x to 2.0 and 2015 saw Angular's popularity decline. Some members of the community weren't overly happy with the direction Google were taking the framework as it's quite a departure from Angular 1.x. This initial shock caused many to look elsewhere. Also, the author of Durandal joined the Angular 2.0 team in 2014 only to resign a few months later to continue work on Aurelia, the successor to Durandal. However, Angular is in heavy use in many organisations and a lot of the design decisions for Angular 2.0 were as a result of them listening to these users, which is always to be encouraged
Angular 2.0 embraces ES2015, Typescript (which is optional) and takes the component approach much like other frameworks mentioned here. Angular drops many of the concepts introduced in 1.x (such as $scope) and simplifies many other elements, such as directives. A big focus for the Angular team has also been mobile performance, so it's no surprise to hear that The Ionic Framework has committed to adopting Angular 2.0. We can also expect the MEAN stack to upgrade once Angular 2 has been officially released.
Overall, I think Angular will continue to get stronger and possibly strengthen its place within the enterprise upon the release of 2.0. Fullstack developers may also find it beneficial to build both their web & mobile apps using the same frontend framework, possibly increasing code-reuse due to the component nature of v2.0.
Learning Resources: Ng-Learn has a nice write-up on Angular 2.0. If you're eager to get started with Angular 2.0 in the MEAN stack, this tutorial is for you.
Vue.js is a front-end framework that's very easy to get started with, yet under-the-hood lies a very powerful framework. For starters, the documentation is fantastic and follows a natural learning path. Vue.js takes the best parts of many other frameworks and bundles them up into a cohesive, digestible whole. Much like React, Vue.js advocates single-file components and unidirectional communication between components to make it easier to maintain application state (store pattern with immutable state). Unlike React, Vue makes it much easier to get started thanks to an official scaffolding tool -Vue-cli. We can even use other preprocessor languages within our single-file Vue components, such as Jade & Stylus. Unfortunately there's no server-side rendering solution just yet, and while Vue performs fantastic on mobile, it doesn't have a large team behind it like Angular, Ionic or React do.
Learning Resources: The Vue.js documentation is the best place to start. Jeffrey Way at Laracasts has created a great video series called Learning Vue 1.0: Step by Step.
Backend
A backend JavaScript developer will be familiar with Express, Hapi or Koa. These are all web servers upon which you can build your applications; they're generally small and un-opinionated about how your application should be structured. Additional functionality is normally provided via NPM modules. However, towards the latter part of 2015, we saw the rise of more full stack frameworks for node.js.
This territory has normally been shunned by JavaScript developers as many prefer to piece together their own stacks. That is still the case for the majority of JavaScript developers and it's how we prefer to do things here at Clock as it gives us the most control.
For the longest time the only viable fullstack framework was Sails.js, closely modelled after Ruby on Rails. Sails is still a great framework, but we now have some new contenders.
Let's begin with this framework as there has been a lot of Internet Drama around Sails and Trails lately. Trails is the work of Travis Webb and his team, spearheading a modular web framework that allows you to swap out components (even the server). This architecture also allows you to easily extend your app with reusable trail-packs.
Travis was a core-contributor to the Sails.js project but was removed by Mike McNeil, the BDFL of Sails. Both parties hadn't managed to settle their dispute in private and it was instead fought on Hacker News, in Github issues, on Twitter etc. Yikes. Regardless, just to be clear, Trails is not a fork of Sails but is in fact a complete re-write and takes full advantage of ES2015. v1.0 is scheduled for release in April, 2016 and from an initial look, it should be very familiar to anyone who has used Sails in the past.
Nodal is brought to us by Keith Horwood and aims to be an easy to use framework for creating REST APIs. While this isn't as fullstack as it initially claims to be (server-side rendering isn't a priority) and it uses an unsupported templating language DoT.js, Keith's made some great progress allowing developers to create REST APIs very easily, primarily through the use of code generators.
Nodal is built from the ground up using ES2015. Keith was unhappy with the lego-style approach to building web applications with node.js and wanted something with a cohesive look and feel across the stack that made him as productive as possible. It's also worth mentioning that Nodal uses Postgres for data persistence. Overall, this is a great framework with a very active community.
If you've ever used Laravel, a popular PHP web framework, then you'll feel right at home with Adonis. Adonis embraces the architecture & design patterns Laravel advocates and brings them to node.js like no other full stack framework. Utilising ES2015 generators, proxies, Service Providers, Inversion of Control containers and a powerful Active Record influenced ORM called Lucid, Adonis certainly does bring a lot of functionality to the table.
This framework favours SQL databases over NoSQL solutions, something that's starting to become a lot more common now that PostgreSQL has great JSON support.
While Adonis is very young, it has a lot of potential - especially for attracting beginners as its documentation is quite thorough. Experienced developers will also appreciate the architecture choices Adonis has made with regards to building & maintaining large applications.
This framework is best suited to those who are not just interested in building stateless REST APIs (which it can do quite well), but those who also wish to do server-side applications. Most frameworks which focus on being a REST API back-end tend to fall down in the server-side rendered department and Adonis knows this.
Strapi is a very interesting framework which focuses on the construction of REST APIs. It's built on top of Koa and contains many features out-of-the-box that a typical developer would need, such as a user management system, JWT authentication, file upload and email support and even supports GraphQL.
But what makes this framework particularly interesting are the accompanying web apps; an admin dashboard that comes bundled with your project and an online tool called Strapi Studio.
The admin dashboard allows you to manage the users and data within your app, where as Strapi Studio allows you to build your API via a web interface and the resulting code is synced down to your computer - very cool stuff.
At the moment Strapi uses Waterline for its ORM, but is in the process of switching to a SQL-only ORM, most likely Sequalize.
Keep an eye on this framework as it has a very passionate team of Parisians behind it.
What do you think? What's your preferred stack? Have you played with 3ree or other such stacks? Let us know in the comments, thanks.
Get in touch if you want to find out more about how we could help you to build your applications using Javascript frameworks.
