There has been a tremendous renaissance of JavaScript over the past decade. Open source projects have paved the way for future web development to flourish with dynamic plugins and major browser fallbacks.
But it feels like we’ve reached a point of resource overload. There are dozens (if not hundreds) of different JavaScript libraries and plugins to choose from. Where do you even start?
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.
Frontend Frameworks
If you build projects from scratch there’s a good chance you’ll benefit from a frontend JavaScript framework. There are quite a few options but the most popular choices are React, Angular, and Ember.
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.
You could qualify the differences by calling Angular/Ember JavaScript frameworks while calling React.js a library. They all work on the frontend, speed up development, and should all be considered viable choices for improving your skillset (and resume).
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.
These three are the most common names to open source JavaScript development. None are perfect and each one is valuable in the hands of a skilled developer. But they’re stirring up most of the discussion online, and if you’re looking for the most popular frameworks I would start with one of these.
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
There are many alternatives you can sift through for related JavaScript frameworks. One is Backbone and it’s also one of the oldest libraries in the list.
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.
But MVVM is an option with choices like Knockout.js and Vue.js. Between these two I’d probably pick Vue.js just because it’s much simpler and faster to learn.
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.
I’m a huge fan of TypeScript and its seemingly meteoric rise to stardom. It behaves more like a superset to JavaScript rather than another language, but it makes your job so much easier.
It also compiles down to ES5 so you can write valid TypeScript and convert it to valid JavaScript with ease.
Anyone serious about frontend development should at least pick up the basics of ES6. If this seems too complicated then consider re-learning some fundamentals of JavaScript. I’d recommend this guide to get you started.
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.
To get moving with ES6 and TypeScript you’ll need a firm foundation in JavaScript. But from there you can check out some of these related guides to get you started:
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.
SPAs are Single Page Applications built on top of JavaScript. Mobile web apps are also SPAs but made specifically for mobile/touchscreen devices.
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.
You can always combine other frontend libraries like React or Angular to merge with a Meteor application. This is where you get to the real detail of modern JavaScript development.
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.
Some developers want to create SPAs with real-time asynchronous data. This can work with extensions like RxJS and even the big frameworks like Ember (for example this tutorial). But this is a much more advanced topic and you’ll want to be comfortable with JavaScript before attempting such a project.
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.
Data Visualization
HTML5 set a precedent for data visualization on the web. Modern games can be built solely in HTML5 with canvas and JavaScript. But businesses and enterprise projects can also get a lot from this. So many JS visualization libraries have cropped up in recent years and the most well-known is D3.js.
There’s almost nothing you can’t do with this library. It allows you to render graphics on the screen clearly and in a handful of formats. Data can be written in JavaScript or pulled from an API, so you have a lot of real-time options too.
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.
It is possible to manipulate SVGs with regular JavaScript. But using a library saves time and allows you to perform much more complicated tasks without reinventing the wheel.
Canvas elements can also be manipulated with vanilla JavaScript. This applies to most libraries in this post, and the only reason you use a library is to save time. In this fast-paced world anything that saves time is well worth using.
The CreateJS suite is a whole library of different JavaScript libs for different purposes.
Easel.js is the most relevant to canvas manipulation. But other cool tools like Tween.js can be used to manipulate animations and transitions, so there is a lot you can do with the CreateJS toolkit.
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.
Two popular choices are Underscore.js and EJS along with Handlebars. You can see live examples on the EJS website to see how the code looks.
Most of these frameworks rely on NPM/Node, so they all work well in a Node workflow.
Other lesser-known (but still awesome) choices are Nunjucks by Mozilla and JsRender.
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
Anyone who wants to build a mobile application typically goes with a native language. This means Swift for iOS and Java for Android. But it is possible to build a native application using JavaScript which compiles to an application that can be accepted to the app store. This isn’t always the best idea when it comes to resource-intensive apps.
If you need to build a relatively simple app then a native JavaScript library can work great. Only trouble is knowing where to start.
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.
These mobile apps look exactly like native iOS/Android apps, but they’re powered by JavaScript and React.
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:
- React Native Tutorial: Building Apps with JavaScript
- Get Started With React Native
- Building a Native App with JavaScript Using NativeScript
- The Beauty Of React Native: Building Your First iOS App With JavaScript (Part 1)
Worthwhile Mentions
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.
Ractive.js
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.
Ampersand.js
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.
Flight.js
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.
Rivets.js
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.
Final Thoughts
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.
No matter what you’re trying to do I guarantee there’s a JavaScript library already online or in the works to help you get the job done. And I can only imagine these trends will continue to grow throughout 2017 and beyond.
Featured Image: Tim152.
The post Rising Trends in In JavaScript: A Comprehensive Guide to Libraries & Frameworks appeared first on Envato.
envato.com coupon from Envato http://ift.tt/2f1W96l
envato.com coupon
Tidak ada komentar:
Posting Komentar