Front-end engineering once again evolved at a feverish pace in 2017. Here is a list of the most notable events of the past year.

React 16 and the MIT license

React continues to dominate the front-end landscape, and 2017 provided one of the most anticipated releases yet with version 16. It includes the fiber architecture which enables asynchronous UI rendering. This release also makes it much easier to manage unexpected application failures by providing error boundaries along with many other features.

Surprisingly, the most important improvement to React this past year wasn’t the new features, but the change to its open source license. Facebook shed its BSD license that was causing companies to move away from React and adopted the user-friendly MIT license. In addition, Jest, Flow, Immutable.js, and GraphQL gained the MIT license as well.

Core team and top contributors include

Progressive Web Apps

We’ve long been searching for the solution to bridge the gap between web and other clients. Google has been spearheading the movement to enhance web applications by converting them to progressive web apps (PWA’s), and 2017 has seen a rapid adoption. A PWA utilizes modern browser technologies to provide a web experience that is more like mobile applications. This offers improved performance and offline experience as well as features previously only available to mobile, such as push notifications. The backbone for PWA’s are a combination of a manifest.json file and utilizing service workers.

Learn JavaScript: JavaScript tutiroals

Yarn’s adoption improves the JS package ecosystem

NPM has grown up quite a bit since its initial release, but it was still missing some crucial features, which Yarn looked to add. Yarn’s key contributions are package caching, a lock file to ensure deterministic builds, parallelizing operations, and flattening dependencies. These features were so successful that NPM implemented them in the version 5.0 release. Yarn has over 1 billion downloads (currently 1.25 million downloads per month) and boasts a staggering 28,000+ GitHub stars. Even if you aren’t using Yarn, JavaScript package management as a whole has improved significantly thanks to its release.

CSS Grid Layout

Grids are finally native to CSS, and browsers are adopting it quickly. In the past, grid systems have been created in CSS using tables, float, flex, and inline-block. The native CSS Grid Layout excels at dividing a page into major regions and creating columns and rows for content. Check out https://gridbyexample.com/ by

WebAssembly supported in all major browsers

WebAssembly (or wasm) is now shipping in all major browsers. wasm is a low-level bytecode format for in-browser client-side scripting. Since it is low-level, it boasts incredible performance but also offers a JavaScript API providing front end developers an easier entry point.

Serverless architectures

The popularity for serverless applications grew at a feverish pace in 2017. They offer a way to increase performance at a reduced cost. Your client is fully decoupled from the server, allowing you to focus on your application and not your infrastructure. A common implementation is to use an AWS API Gateway combined with an AWS Lambda function as a BaaS (backend as a service) to be consumed by your client. You can get started with this excellent introduction by

Vue.js continuing to grow in popularity

Even with all of React’s success, Vue (created by

CSS-in-JS and preparing for the upcoming CSS Holy War

After the rapid evolution in JavaScript that we’ve witnessed, the ecosystem is starting to stabilize. It’s inevitable that we’ll also see the same relentless advancements in CSS as well, as it catches up to modern web application needs. In 2017, the primary advancement has been the stark improvements and adoption of CSS-in-JS, where all styles are built through code and not style sheets. It’s not yet clear if this will be the ultimate direction that the front end community lands on, but it’s the current bleeding edge method and appears to solve many of the problems found while building a component-based applications.

2017 has seen styled-components (by

Static site generation

2017 saw a time warp with static website making a comeback. Frameworks such as Gatsby empower you to build static websites using React and other modern tools. Not every website needs to be or should be a complicated modern web application. Static site generation offers you the benefits of server side rendering and unmatched speed since you’re serving prebuilt markup. If you’re looking for a good example, the official React docs themselves have been built using Gatsby.

Static site generation has sparked another trend known as the JAMStack: “JavaScript, APIs, Markup”. The JAMStack uses the same static prebuilt HTML files along with reusable APIs and JavaScript to handle any dynamic programming during the request/response cycle.

GraphQL explodes and makes us rethink API construction

GraphQL appears to rapidly be gaining ground on REST, and

It is becoming so prevalent that

React Router 4

React Router by

Angular released v4 quickly followed by v5

After infamously skipping version 3 to maintain SEMVER, Angular 4 officially shipped on March 23rd. In version 4 the Angular team adopted the community project Angular Universal — which provides a method for server-side rendering Angular apps — as an official part of the Angular project. The Angular Animation package was also extracted from @angular/core for importing only when needed, and Ahead Of Time compilation within the View Engine has been refactored for performance, “reduc[ing] the size of the generated code for your components by around 60% in most cases.”

Version 5 saw the adoption of additional long-awaited improvements. Creating a Progressive Web App with Angular v5 is now much easier than any earlier version thanks to the new @angular/service-worker package. The Angular compiler was also improved, enabling faster builds/rebuilds during development, and the Angular Router now exposes all new lifecycle hooks, including ActivationStart, ActivationEnd, ResolveStart, and ResolveEnd.

TypeScript and Flow

TypeScript has gained a cult following among many JavaScript developers while Flow offers a more nimble way to introduce types without aggressive refactoring. The lack of types in JavaScript has been a complaint of many. TypeScript was created by Microsoft and is a requirement in the new version of Angular. Flow is the brainchild of Facebook.

gitconnected creates the community for developers

gitconnected launched creating the community for developers and software engineers. It offers the ability to collaborate, share articles, and create discussions with other developers. In addition, you can seamlessly display you projects and portfolios on your personalized profile page. Don’t miss the opportunity to connect with others that share you interests and help each other to learn and grow.

What to expect in 2018

• The CSS battle rages as we figure out the best way to handle styles in component-based applications.
• More companies adopt mobile solutions that have a unified codebase such as React Native or Flutter.
• The web becomes more native with offline capabilities and seamless mobile experiences.
• WebAssembly could make great strides, offering a better web experience.
• GraphQL continues to challenge REST.
• React strengthens its position (yes, even more) now that there is no fear over the license.
• Flow and TypeScript take a stronger hold, giving JavaScript more structure.
• The influence of containerization becomes more prevalent for front end architecture.
• Virtual reality makes strides forward using libraries like A-Frame, React VR, and Google VR.
• People build some really cool applications using the blockchain and web3.js (authored by
  Marek Kotewicz
  and
  Fabian Vogelsteller
  ).

If I missed anything big, leave a comment and I’ll be sure to add it!

If you found this article helpful, please tap the 👏. Follow me for more articles on React, Node.js, JavaScript, and open source software! You can also find me on Twitter or gitconnected.

Recommend & share..