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.

In addition, Angular supports CSS scoping out of the box through “view encapsulation”. This is turned on by default.

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) and TS 3.0 is released

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. In addition, TypeScript had a major version release with v3.

Accelerate Mobile Pages (AMP) Grows Rapidly

AMPs are pages specifically built for mobile devices.

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.

VS Code Dominates the Text Editor/IDE Usage

Text editors and IDEs are battleground for developers dating back to Vim vs emacs. With the creation of Electron, open source editors based on plugins exploded with Atom taking an early market share. However, VS Code has recently proven to be the runway favorite with developers and the overall leading editor by a significant margin in 2018.

Most Influential Articles of 2018

Full list of top articles in 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

GitHub is acquired by Microsoft

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