3 JavaScript Frameworks that have Embraced the Components Based Future of Web Development

There’s a new theme circling the front-end web development scene these days—components-based web development.

This new style of web development focuses on creating small, self-contained, components that can be strung together to build a full-featured user interface (UI).

The idea of encapsulating code into reusable UI components is nothing new, but it’s only in recent years that JavaScript frameworks have made it feasible to build an entire front-end out of these components. These three articles from Upwork’s Hiring Headquarters highlight frameworks that allow you to take advantage of the componentized future of the web.

1. Progressively componentize with Vue.js

A primary selling point of component-based architectures (CBA) is the ease of integrating new features. Vue.js makes this concept its defining mantra, calling itself “the progressive JavaScript framework”—it encourages you to incrementally adopt Vue components into your app’s UI as required.

In “An Introduction to the Vue.js JavaScript Framework,” Carey Wodehouse highlights this progressive framework:

“Many front-end JavaScript frameworks provide you with all the bells and whistles right out of the box, letting developers pick and choose the modules they need. But with all of that functionality at your fingertips comes a lot of code overhead—something that can potentially slow performance.

To answer the needs of developers who don’t need quite as much under the hood but would prefer to pick and choose the modules they need, Vue.js offers a buildable framework—layered components that let you add as much as you need, where you need. With that comes a great deal of flexibility and performance that’s right on par with mature, road-tested frameworks like React, Riot and Polymer.”

Vue.js is also less opinionated than the competition; with simple HTML templates and support for CSS modules and pre-processors, knowledge of the web fundamentals (HTML, CSS, and JavaScript) is all you need to pick up and play with its components. It’s also incredibly lightweight, weighing in at only 20kb under minification and gzip compression. Read the full article >>

2. Handle components the Angular way with Angular 2

Initially released in 2009, AngularJS has had a long reign as the most popular JavaScript development framework. The Angular development team caught wind of the componentized future of web development and launched Angular 2 (or simply Angular), a complete rewrite of the framework.

In my post, “The Future is Angular: An Introduction to Angular 2,” I introduce the successor to the Angular development platform:

“Perhaps the biggest change to the Angular platform is the shift towards components-based web development. Angular 2 allows you to build web applications out of components that neatly encapsulate all the style and function required for a certain feature to work. Making custom HTML elements in AngularJS took a non-trivial amount of code, requiring the developer to reason about controllers, directives, restrict and scope. Angular 2 greatly simplifies that process with components—reusable UI building blocks that are easy to test and reuse.”

Beyond the switch from model-view-controller (MVC) to CBA, the article dives into the ways in which Angular improved on some of its flagship features, such as dependency injection and two-way data binding, the platform’s switch to TypeScript, and its shiny new command line interface (CLI). Read the full article >>

3. Harness the power of SSR with React

UI components have been around for a long time, but it wasn’t until React.js was released in 2013 that the power of a purely components-based approach to web development became mainstream.

In “An Introduction to the React Framework,” we see how React made server-side rendering (SSR) relevant again:

“The beautiful thing about [SSR] is that the app is able to pre-render the initial state of a view before showing it to the user. When a user loads a webpage, they get to see it as the designers and developers intended, without having to wait for their browser to download the JavaScript necessary to render the page. [SSR] is also great for search engine optimization (SEO), since most search engines have an easier time crawling and understanding pre-rendered HTML views.”

The article goes on to explore how React is able to provide superior performance through SSR with the help of a virtual Document Object Model (DOM)*—a local simplified copy of the actual DOM that allows React to alter specific parts of the DOM without having to refresh the entire webpage with every change to the UI.

As a components-oriented framework, you are free to use React as the “V in MVC” for an existing project, or to build competitive apps entirely out of React components with Flux—an alternative design pattern to MVC—and Redux, a library that helps you use Flux. Read the full article >>

*The DOM is an application programming interface (API) for documents, usually HTML and XML, in the context of web development. It defines the active data structure of a web page that you get when the browser parses a document. 

Eager to learn more about the ever-changing world of web development? Check out more articles about web development in the Hiring Headquarters.

 

The post 3 JavaScript Frameworks that have Embraced the Components Based Future of Web Development appeared first on Upwork Blog.

from Upwork Blog http://ift.tt/2xES65O