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 Dominic Gannaway, Dan Abramov, Sophie Alpert, Sebastian Markbåge, Paul O’Shannessy, Andrew Clark, Cheng Lou, Clement Hoang, Probably Flarnie, Brian Vaughn, .

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.

Progressive Web Apps: Great Experiences Everywhere (Google I/O ‘17)

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 Rachel Andrew to start learning.

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. Firefox recently announced the inclusion in all browsers.

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 Adnan Rahić.

Vue.js continuing to grow in popularity

Even with all of React’s success, Vue (created by Evan You) continues to grow in popularity. The framework provides a component-based architecture and is one of the leading alternatives for React. It has seen adoption from larger companies including GitLab which recaps their past year using the framework.

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 Max Stoiber, Glen Maddern, Phil Plückthun) take the lead in terms of popularity. Emotion (by Kye Hohenberger) is one of the newest libraries available, but it has seen rapid adoption. Another option to consider is glamorous (by PayPal, Kent C. Dodds, and a lot of passionate contributors) which wraps the glamor library. Check out this article out for a summary of many of the available CSS-in-JS options.

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. Netlify is a great option for getting started with the JAMStack and static hosting for free. Brian Douglas wrote an excellent article comparing the JAMStack vs. server side rendered apps by building Hacker News clones.

GraphQL explodes and makes us rethink API construction

GraphQL appears to rapidly be gaining ground on REST, and Samer Buna even claims that REST is already dead. Instead of managing multiple endpoints and fetching unnecessary data, GraphQL allows the client to declaratively define the data that it needs and retrieve it all from a single endpoint.

It is becoming so prevalent that GitHub has written the newest version of its API in GraphQL, and many companies are creating products to make it accessible to all developers such as the popular Graphcool framework by Johannes Schickling.

React Router 4

React Router by Ryan Florence and Michael Jackson evolved from just being a router for React to truly becoming React Router — a declarative router enabled by simply using React components. It is the first version endorsed by the React team. The API has stabilized, and the React Training team has stated that it will not see any large breaking changes for the lifetime of the project.

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!