A Recap of Frontend Development in 2018

A Recap of Frontend Development in 2018

The world of frontend development moves fast. Very fast. This article will recap the most important frontend news, notable events, and trends in JavaScript for 2018.

WebAssembly Makes Major Releases with the Core Specification Reaching 1.0

WebAssembly is often regarded as the future of the web. It aims to maximize performance, reduce file size, and enable web development in multiple languages by offering a binary format that runs on the web.

In late 2017 all major browsers announced that they support WebAssembly. Then in February 2018, WebAssembly had 3 major releases:

• The core specification released 1.0
• JavaScript interface for WebAssembly
• Web API for WebAssembly

NPM Downloads of Popular Frontend Libraries

React, jQuery, Angular, and Vue round out the top 4 downloads for popular frontend modules. Read further to understand the latest developments for the libraries.

React Continues Its Reign While the Library Evolves

React has dominated web development for years now, and it did not slow down at all during 2018. It remains one of the most loved libraries according to the Stackoverflow survey .

The core React team is very active at updating the library and adding features. Throughout 2018, we saw many additions to the React v16 release including new lifecycle methods , a new context API , pointer events , the lazy function , and React.memo . However, the two features that have received the most attention are React Hooks and the Suspense API .

React Hooks have been met with some loud feedback, with many developers loving the update. Hooks are a way to add state to functional components with the useState function, and it will also manage the lifecycle events.

In the following video, Ryan Florence shows React Hooks made his example app 90% cleaner.

The other huge release, React Suspense, is a way to manage data fetching inside the React components themselves. It suspends the rendering of data while it waits for an asynchronous response. Suspense is what’s behind the lazy function to manage code splitting of components. The ultimate vision is to be able to manage all asynchronous loading, such as API requests, through the suspense API. It will also allow for the caching of results from a request.

The contrived example is showing many load spinners on the screen while your isFetching flags are true . With Suspense, you have fine-grained control of your UI to specify what the fallback components you want to display while waiting, how long to wait, and how to manage navigation. Many even think Suspense could remove the need for Redux. Check out Dan Abramov ’s talk on building an app using the Suspense API :fire:.

Vue Continues to Grow While Passing React in GitHub Stars

After exploding in 2017, Vue continues its growth during 2018. In fact, it even surpassed React in the number of stars received on GitHub.

While Vue is beloved, it is still pacing behind React and Angular in actual usage by a decent margin. However, Vue has a passionate user base that is still growing, and the library looks like it will be a force for years to come.

Evan You (Vue Creator) Gives Us a Taste of Vue 3 as the Package Pushes Towards Release

Vue is workings toward its 3.0 release. The creator Evan You gave us an overview of it in November both at VueConf Toronto and in an article linked below. He has already posted his slides online, and the video is coming soon.

Angular Continues To Be Utilized Actively, Releases v7

In October, Angular had another major release with version 7 of its popular UI framework. Angular has seen a ton of growth from its early AngularJS MVC architecture to its more modern Angular package utilizing components. With this growth, it has seen further adoption.

While Angular does not have the same zealous fans that we see for libraries such as React and Vue, it still remains a popular choice for professional projects. Many developers experience fatigue when using React because it requires the engineer to make many of the dependency and architectural decisions while also managing the build pipeline.

On the other hand, Angular removes many of the decisions from the developer and helps ensure more common code patterns. Angular is a full framework that is highly opinionated, and the CLI manages all of the build steps. Another bonus for a professional environment is that Angular requires TypeScript. Angular has carved out its value in the web development world and continues to see adoption.

NOTE: @angular/core represents the new Angular and angular represents the old AngularJS

GraphQL Grows in “Desire to Learn” but has Not Overtaken REST

GraphQL has seen some adoption by tech leaders such as GitHub . However, it has not taken off quite as quickly as some predicted. According to the State of JS survey , only 1/5 frontend developers have used GraphQL, but a staggering 62.5% of developers have heard of it and want to use it.

CSS-in-JS Gains More Adoption

Web development feels like it has been on a path to unify everything under JavaScript, and this is shown in the adoption of CSS-in-JS where styles are created using JavaScript strings. This allows us to share styles and dependencies using normal JS syntax through import/export. It also simplifies dynamic styles as the CSS-in-JS component can interpolate props into its styling string. Below is an example of the classic CSS vs CSS-in-JS.

To manage dynamic styles with CSS, you have to manage class names in the component and update it based on state/props. You would also need a CSS class for the variations:

// Component JS file
const MyComp = ({ isActive }) => {
  const className = isActive ? 'active' : 'inactive';

return <div className={className}>HI</div>
}

// CSS file
.active { color: green; }
.inactive { color: red; }

With CSS-in-JS, you no longer manage CSS classes. You simply pass props to the styled component, and it handles the dynamic styling. The code is much cleaner, and we have a clearer separation of concerns for styles and React by allowing CSS to manage dynamic styling based on props. It all reads just like normal React and JavaScript code now:

const Header = styled.div`
  color: ${({ isActive }) => isActive ? 'green' : 'red'};
`;

const MyComp = ({ isActive }} => (
  <Header isActive={isActive}>HI</Header>
)

The two leading libraries for CSS-in-JS are styled-components and emotion . Styled-components has been around longer and has more adoption, but Emotion is gaining ground quickly, with many developers finding it to be the preferred library. In fact, Kent C. Dodds even deprecated his CSS-in-JS library, Glamorous, in favor of Emotion.

Vue also supports scoped CSS out of the box when using Single File Components. By just adding the scoped property to your component’s style tag, Vue will use CSS-in-JS techniques to scope the styles so they won’t bleed out into other components.

Developers Find Relief From the Fatigue in CLI Tools

It is no secret that it can be exhausting to keep up with the latest libraries, configure your app correctly, and make the right architectural decisions. This pain has spawned the creation of CLI packages which manage the tooling, allowing the developer to focus on the app. This tooling has become a primary way developers create applications in 2018. Popular frameworks include Next.js (SSR for React), Create-React-App (client-side React), Nuxt.js (SSR for Vue), Vue CLI (client-side Vue), Expo CLI for React Native, and by default with Angular .

Static Site Generation Grows as We Try to Simplify the Frontend and Seek Performance

Everyone loved learning the latest and greatest libraries as the JavaScript revolution happened, but now that things are settling, we have realized that not every website needs to be a complex single-page application (SPA). This has caused the growth of static site generators. These tools allow you to code in your favorite libraries such as React or Vue but generate static HTML files during build time, allowing us to serve fully constructed pages to users immediately.

Static sites are great because they provide an ideal combination of performance with simplicity. With HTML files rendered at build time, we are able to immediately send the user a page without needing to SSR or CSR the code, allowing them to load the site almost instantaneously. The necessary JavaScript files are then downloaded on the client allowing for a single page experience.

Static sites are perfect for building personal websites or blogs, but they can easily scale up to larger applications. We’ve seen the rise of popular frameworks for building static websites, like Gatsby and React Static for React apps, and VuePress for Vue apps. In fact, static sites have become so popular that Gatsby has actually formed a company and received VC funding around their open source library this past year.

Serverless Architectures and JAMStack

With the increasing popularity of static sites, we have also seen the continued growth of backends to compliment them. Serverless architecture has been a buzzword in web development for the past few years for its ability to decouple the client and server code while allowing for operating at a reduced cost.

An extension of the serverless philosophy is the JAMStack (JavaScript, APIs, Markup). The JAMStack philosophy builds on the static site concept discussed in the previous section. It allows for blazing fast load times thanks to pre-built markup, and becomes a dynamic SPA on the client by utilizing reusable APIs for the server. In 2018 we even saw the first ever JAMStack hackathon . freeCodeCamp , Netlify , and GitHub teamed up to host an in-person and online hackathon, allowing people to code in the GitHub headquarters or connect with other developers around the world.

To understand how big a JAMStack website can scale while still maintain performance, Quincy Larson explains how freecodecamp.org is powered by the JAM architecture.

TypeScript May Be the Future of JavaScript (but the Same Can’t Be Said for Flow)

JavaScript has received criticism for not having statically typed variables. The two main libraries attempting to rectify this are TypeScript and Flow , but TypeScript looks to be the runaway favorite. In fact, TypeScript was rated higher than JavaScript itself in the Stack Overflow survey at 67% vs 61.9% for the most loved language. According to the State of JS survey, over 80% of developers want to use TS or are already using it and enjoying it. For Flow, only 34% of developers are using it or want to use it.

By all indications, TypeScript is the go-to solution for static typing in JS, and many people are opting for it over normal JavaScript. In 2018, the number of npm downloads for TS grew substantially while Flow stayed very flat. TypeScript looks to be moving from a cult following to widespread adoption.

Webpack 4 Lands in Early 2018

Only 8 months after the release of Webpack 3, version 4 was released. Webpack 4 continues to push for simplicity and faster builds, claiming up to a 98% improvement. It opts for sensible defaults, handles more functionality out of the box without plugins, and using a config file is no longer require to get started. Webpack also now supports WebAssembly and allows you to import WebAssembly files directly.

Babel 7.0 is Released

After almost 3 years since version 6, Babel 7 was released in 2018. Babel is the library that transpiles ES6+ JavaScript code down to ES5, making our JavaScript code cross-browser compatible. The Babel release article states that the improvements in v7 are that it’s “faster, created an upgrade tool, JS configs, config ‘overrides’, more options for size/minification, JSX Fragments, TypeScript, new proposals, and more!” Babel has also started scoping its packages under the @babel namespace.

Most Influential Articles of 2018

Addy Osmani showed us the cost of JavaScript in 2018

We learned the future of React at React Conf in November

Airbnb shares their 2-year experience with React Native

Google gives us a peek under the hood of the Google Photos Web UI

Microsoft is adopting Chromium for the Edge browser

Ryan Dhal (Node creator) tells us the mistakes he made with Node and gives us a glimpse of a TypeScript runtime, Deno

Predictions for 2019

• With the foundation in place and the constant push for improved web experience, WebAssembly will start to see more life.
• React stays on top, but Vue and Angular continue to grow in users.
• CSS-in-JS may become the default styling method instead of plain CSS.
• Not surprisingly, performance continues to be a focus and things such as PWAs and code splitting become the norm for every app.
• Building on the PWA adoption, the web becomes more native with offline capabilities and seamless desktop/mobile experiences.
• We continue to see the growth of CLI tools and frameworks to continue to abstract away to the tedious aspects of building applications, allowing developers to focus on producing features.
• More companies adopt mobile solutions that have a unified codebase such as React Native or Flutter .
• The influence of containerization (ie. Docker, Kubernetes) becomes more prevalent in the frontend process.
• GraphQL makes a leap in adoption and is utilized in more companies.
• TypeScript starts to become the default choice over standard JavaScript.
• Virtual reality makes strides forward using libraries like A-Frame , React VR , and Google VR .