Home > Hot in web development > 3 JavaScript Libraries to Keep an Eye on in 2017

3 JavaScript Libraries to Keep an Eye on in 2017

3 JavaScript Libraries to Keep an Eye on in 2017 was peer reviewed by Aurelio de Rosa and Vildan Softic. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Phew, 2016 is over! It was a crazy year for both the world and JavaScript land. Countless new impressive libraries and frameworks popped up, You Might Not Need JavaScript showed some patterns that made many question their use of JavaScript (a little) and one tweet of a slide from Nolan Lawson’s talk on Fronteers caused some commotion and responses from great names like Jeremy Keith and Christian Heilmann, all summarized in a post by Nolan. I’m starting to think “crazy” is an understatement. 2016 was insane.

This year also included JavaScript fatigue. In case you missed it, many developers are experiencing fatigue over JavaScript’s ecosystem, as a lot of tooling and configuring is required to set up a “modern” JavaScript project. At one point, so many developers had shared their thoughts that a few more articles surfaced on “JavaScript fatigue fatigue”!

To help both you and me sleep at night, I have a compiled a list of 3 promising generic libraries/frameworks for front-end development.

Vue.js

If you weren’t keeping an eye on Vue.js already, you definitely should. Vue.js is a tiny JavaScript framework.

No, don’t run away!

Vue.js seems to primarily focus on views and give you only a handful of tools to regulate data for those views. Instead of a framework stuffed with programming design patterns and limitations, Vue.js’ minimal approach doesn’t get in the way, which is nice for a change.

Vue.js comes in two flavors: a stand-alone version that includes the template compiler and the runtime version that doesn’t. In pretty much all cases, you will want to precompile the templates using Webpack or Browserify, and only load the runtime package client-side. See Vue.js’ installation page for more info.

To demonstrate its simplicity, below is an example of a component that shows a message and adds interactivity to a button to reverse the message.

<div id="app">    <p>{{ message }}</p>    <button v-on:click="reverseMessage">Reverse Message</button>  </div>  
import Vue from 'vue'    new Vue({    el: '#app',    data: {      message: 'Hello World!',    },    methods: {      reverseMessage: function () {        const reversedMessage = this.message          .split('')          .reverse()          .join('');          this.message = reversedMessage;      },    },  });  

Do you miss features you really enjoyed from other libraries? Many plugins for Vue.js are available, and several guides are available to use and write a Vue.js plugin.

You should definitely try this framework if you want to get productive fast. It scales well as the project grows. It is worth mentioning this library is maintained by one person with the help of generous contributors and sponsors.

Regardless whether you choose the stand-alone or runtime flavor, Vue.js supports ES5-compliant browsers by default. Although not documented, I am sure you can increase support by manually adding an ES5 shim.

For more information, check out Vue.js website or its GitHub repository. If you’re interested, be sure to check out Nilson Jacques’ editorial on Vue.js and Jack Franklin’s introduction to Vue.js 2.0.

Read Full Article

admin
The WebRecital is a dedicated User Interface/User Experience professionals who come together to provide design and research workshops, portfolio reviews, and educational outreach to the greater Seattle area.
http://webrecital.com/

Leave a Reply

Your email address will not be published. Required fields are marked *