Quick Jump: Frontend Frameworks, Smaller (Yet Awesome) Frameworks, The Growth of ES6, Building on Node.js, Mobile Webapps & SPAs, Data Visualization, JS Templating Engines, Native Mobile Apps & Worthwhile Mentions.
Angular and Ember are both MVC frameworks that help you separate models, views, and controllers from your workflow. They help you deal with routing and views which are staples for building single page applications.
React is a bit different because it works on top of a virtual DOM which offers a faster way of manipulating the DOM. React comes with page components and helps developers create a library of reusable resources – but it is not a traditional MVC framework.
Take a look at the Google Trends chart for all three of these libraries.
You may be surprised to see a sharp uptick in both Angular and React.
Angular has been getting major coverage due to the release of Angular 2. It’s one of the most trusted frontend frameworks since it’s spearheaded by Google.
Ember is great, but it also has a steep learning curve. It can be just as powerful (if not more so) because the community is active and supportive, but it’s tough to learn without prior MVC knowledge.
React boggles the mind of some developers. It mixes JS with HTML which seems like a problem of separating/abstracting your code.
But anyone on the fence about React should take a look at this post and follow it all the way through. It might get you thinking differently about this ever-growing frontend library.
And if you need some learning resources you can get started with these articles:
- A Better Way to Learn AngularJS
- AngularJS for Test-Driven Development
- Learning React.js: Getting Started and Concepts
- 10 Steps for Ramping into Ember.js Quickly
- Getting Into Ember.js
Smaller (Yet Awesome) Frameworks
Most people don’t learn Backbone anymore because it doesn’t have as much rigid structure. You have to plan a lot of the structure on your own, not to mention there are more active communities to choose from.
Marionette greatly improves the Backbone workflow so it has seen a small resurgence. But generally speaking I’d argue most developers learn Backbone to support legacy systems rather than to build new applications.
Other solutions go into the MVVM model rather than the MVC model. These both contain Views and Models, but MVVM contains a ViewModel while MVC contains a Controller. This Stack answer explains the general differences between the two and how they operate.
A controller handles HTTP requests and delegates all that data between the view and data model. The ViewModel is an intermediary between the View and the Model (and vice-versa).
Neither solution is better or worse, just different and used for different purposes. Brand new JS devs should start with MVC because it applies to far more libraries including backend development.
Both are relatively small libraries and they have a while to go to catch up to React or Angular. But in the space of frontend development, there are no right or wrong answers. You use whatever works for you, and in this case, Vue/Knockout may be a great solution.
There’s also a lot of fuss surrounding Aurelia with its mainstream support of ES6/ES2015. The library combines Aurelia code with ES6 but the two are easy to separate in real-world examples.
I have not used Aurelia much but I do know it works like a “futuristic” JS library. It reminds me a bit of Angular pushing forward with TypeScript support.
Again these are all just some alternatives and brand new developers would be much better off starting with a titan like React/Angular/Ember, but of these alternatives my personal favorite would be Vue.js.
The Growth of ES6 (and Beyond)
Browsers don’t support newer ES6 code just yet. But developers have already jumped onto the train and cannot be bothered to wait around.
The web moves just as fast as technology and consumers are left trying to keep up.
You may be wondering about the specific benefits of ES6 and how this can fit into your workflow. Classes, const/let keywords, various shorthands, and many other features make writing ES6 a lot easier than the current ES5 standard.
Beyond ES5/ES6 there is always TypeScript. I won’t say this is mandatory, but it is growing and it’s officially part of the Angular framework toolset.
Other similar choices like Elm.js are available. But these alternatives are not as built out compared to TypeScript.
Building on Node.js
I’d be crazy to ignore the popularity of Node.js. This is the first time developers have been able to use one language on the frontend and backend throughout an entire web application.
The library is still very new but it’s growing rapidly.
Node actually offers way more than just a backend framework. It provides tools like NPM and Gulp.js which are both part of the modern web development workflow. Node tools run through the command line, so there’s a big reason for developers to integrate this into their workflow.
Check out this intro guide to get started with Node tools and learning how to add these into your workflow.
I would at least recommend that developers familiarize themselves with NPM (Node Package Manager) to start. It’s super easy to install and it’s the most popular frontend package manager on the market.
Since Node is more of an environment/library it doesn’t have a custom framework. But it does have frameworks built on top of Node, my favorite being Sails.js.
This MVC framework blends into the Node environment so you can run a local Node server and build entire web apps on Node from front to back.
Another MVC Node framework is Adonis and while I haven’t personally used this, it does seem to have a great community behind it.
Even if you want to avoid backend JS development you should still consider learning the basics of NPM and Gulp task automation. You can do so much in a Node environment and the web dev community has quickly rallied to support Node and all its related tools.
Node can get incredibly complex but don’t let it overwhelm you. Start slow and learn the basic workflows first.
Here are some guides to get you started:
- Gulp for Beginners
- Getting Started With Node.js on Node Hero
- Utilising Node.js and npm for a front-end development workflow
Mobile Webapps & SPAs
These are two different topics but they relate to each other on a single topic: single-page web development.
You can build SPAs that also support mobile, but they’re meant to be full apps that run in any browser. The most popular SPA framework at this time is Meteor.
Some devs have even released custom libraries built on Meteor. The most prominent example is Telescope built on React and Meteor. It lets you create a social voting website with these existing technologies.
Now for mobile webapps I always default to jQuery Mobile because it’s trusted, well documented, and frequently updated.
This lets you build SPAs that use pre-built components. So you have a whole library of touch-enabled items like drop-down menus, forms, image sliders, and other page elements.
I think interest has dropped in building mobile web apps because responsive design has paved the way for a universal experience. But some projects require a mobile-only approach, and for this jQuery Mobile fits the bill perfectly.
Since this has been around so long there are even 3rd party resources based on the D3 library.
For example, PykCharts is a downloadable library of 25+ templates ready made for D3 rendering. You can get shareable data in your browser within minutes using these two resources.
Now beyond charting and data mapping you might also want to manipulate vectors. Canvas is one option, along with SVG elements that can be hard-coded into a layout.
For this Raphaël is the best choice. It’s completely free, open source, and holds a very high reputation like D3.
No matter what you use it should be clear that browser-based visuals are becoming the norm. And with this trend growing in popularity, you’re best picking up a couple of visual JS libraries to aid in your development.
There are many other visual libraries to check out, but I have seen a lot of attention given to these three alternatives:
JS Templating Engines
There are so many templating engines that I couldn’t possibly list them all. Not everyone even wants to use a templating engine! But these are great libraries to speed up frontend development.
Angular comes with its own templating but Ember uses Handlebars. In personal projects, without dependencies, you can use whatever you like independent of all these other libraries. But it will be hard to combine DOM-based libraries (like React) with simpler HTML templating engines.
I’d recommend skimming this article, it compares all the modern JS templating engines. Some are more updated than others and some are simpler.
Most of these frameworks rely on NPM/Node, so they all work well in a Node workflow.
If you need a place to get started, you might consider working with an existing framework like Ember.js. This forces you to learn how templates work and why you’d use them, making it a lot easier to learn more templating engines in the future.
Native Mobile Apps
With the insane popularity of React.js it should be no surprise that React Native is part of this list. With React Native you build native mobile applications on the React shell.
As you can imagine this involves a lot of WebViews and similar hacky solutions. This means a mobile game, social networking app, or any app that uses heavy animation should avoid a native JS framework.
But you can go pretty far with React Native and there are many great communities to help you learn.
Yet as with all JS libraries, there are alternatives.
NativeScript is one other very popular library for native app development. It’s compatible with all platforms and builds on top of Angular/TypeScript.
The site has an entire resource page to get you started with handy learning materials. This is a fantastic choice right along with React Native because it’s just as popular.
I’ve heard many good things about the Ionic Framework which has grown quickly over the past couple years. This works as an SDK for HTML5/JS apps that can become web apps or native apps based on whatever you need.
But one other choice I’d also recommend is PhoneGap, now owned by Adobe.
I used PhoneGap long ago when it was still Cordova in its early stages of development. It seemed OK but certainly wasn’t the best choice.
Now that it’s had years to grow I can safely say that PhoneGap is a reasonable choice for native app development. The Adobe community is huge and this one project can help you build iOS, Android, and even Windows Phone apps with HTML/CSS/JS.
All of these libraries are completely free and worth testing for native development. But if you’re looking for a secure choice I’d go with either NativeScript or React Native, both of which are growing rapidly every year.
To get started check out these articles:
- Get Started With React Native
Before wrapping up this post I want to share a hodgepodge of growing JS libraries that solve some very specific tasks.
There are many that I’m probably forgetting but I simply couldn’t end this article without sharing some of the more interesting/emerging libraries out there on the web.
The Ractive library takes templating to a whole new level combining common UI elements into the templating engine.
Actually using this in a production environment would be tough. You could make it happen, but it’s also still in heavy development and not up to the level of React. But it’s worth keeping your eyes on for future process.
In the world of JS frameworks I think Ampersand really pushes the boundaries. It has a vague self-description as a “non-frameworky framework” which breaks apart the individual MVC sections into components.
This means the library runs as individual modules that you can work with separately or together based on your needs.
It’s a work in progress but I like the direction it’s taking.
Twitter is notorious for its Bootstrap library but they have another awesome project called Flight.js. This is a framework that doesn’t force you into one specific way of rendering content on the page. You can use any templating engine and it’s flexible with other common libraries like jQuery.
This is still very young and I think it has a long way to go before it’s ready for production. But under the guidance of Twitter I’m sure this library will grow quickly.
The Rivets library works as a View component that can be dropped into any major frontend framework. It helps with data binding like you’d find in a typical framework, but it’s also agnostic of whatever stack you’re using.
It’s a really cool project almost in its v1.0 release. If you’re using something like Angular, then you probably won’t need this. But it may be worth learning if it catches the attention of the larger MV* community.
With so many JS frameworks out there I can’t recommend one perfect solution to rule them all. Nor do I think all developers should learn every framework.
The best approach is to study what’s trending and why it’s popular. Then analyze what problems you face in your web work and look for a solution. It may be a workflow problem that could be improved with NPM/Gulp. Or it may be a particular niche problem like data visualization.
Featured Image: Tim152.