Interesting frontend technologies to follow

The world of web development is constantly changing and it is a challenge to keep a close eye on everything that is going on. Which frameworks will still be relevant in the coming year? And which tools are most suitable for your web application? Let’s discuss a couple of interesting frontend technologies for web development.

Svelte

The big underdog of the frontend frameworks: Svelte. It’s been around for a couple of years and in April 2019 version 3.00 was released. Svelte is a little different than React, Vue or Angular because it compiles your code to tiny, framework-less vanilla JS. And it’s not just very performant, with no run-time dependencies, it’s also very elegant and easy to learn the framework. It’s npm downloads have more than tripled over the last year, and in the results of the 2019 State of JS survey, it showed that 44.9% of JS developers were interested in learning Svelte. Time has to tell if people will actually adopt it in production applications, so I’m curious about what the future will bring for Svelte.

Expo & React Native

React Native, the framework for building native mobile apps with React has had a steady growth in the last couple of years. The 2019 State of JS survey from 2019 showed that last year 27.9% had used React Native and would use it again, together with 44.3% that was interested in learning React Native. I have been using React Native to build the mobile apps of RaterFox, and really enjoyed it. It was easy to pick up because I already built the frontend of RaterFox with React. One thing that's kind of annoying right now, is that I’m managing 2 codebases that really look alike. Especially all Redux code is mostly the same for the website as the mobile app. Luckily for me, the React Native teams have even bigger plans than just building for Android and IOS with one codebase. What about building for mobile, web and desktop, all with React Native? Sounds too good to be true, but it is very real. Expo, an open-source platform for making React Native apps, is on a mission to create the best possible end-to-end developer experiences for building and deploying apps on multiple platforms. I would definitely keep an eye out for Expo and highly recommend this talk from Evan Bacon about Expo for mobile, web, desktop and console: https://www.youtube.com/watch?v=ykBxY01j_rA

Btw, if you are looking for a nice boilerplate for your next React projects, check out React Milkshake.

TypeScript

TypeScript seems to be taking over frontend development. Almost 90% of developers (who filled in the state of js survey) admit they would like to use or learn TypeScript in their next project.

TypeScript is an open-source language that builds on JavaScript by adding static type definitions. Types provide a way to describe the shape of an object, providing better documentation, and allowing TypeScript to validate that your code is working correctly.

Migrating an existing project from Javascript to Typescript is probably a huge task and maybe not worth it, but you should definitely try out Typescript in your new projects (if you aren’t already). You can easily use Typescript when starting a new React application by running yarn create react-app my-app --template typescript or work with Angular, which comes with Typescript by default.

Angular

Speaking of Angular, let’s talk about the great things of this framework. Yes, React is eating the world, and Vue has definitely proved itself in the last couple of years, but while everybody seems to be talking about the shiny new tools we might forget to pay a little attention to Angular. The JavaScript framework, developed by Google, deserves a little more love, even though it doesn’t have the best reputation inside the frontend developer community. The move from angular 1 (AngularJS) to Angular 2, which was so different it required complete rewrites, left some big scars. Times have changed though, and lots of progress has been made.

Updating your application to the next major version of Angular has never been easier. Since Angular 8, you can just use ng update to update your application and its dependencies. Besides that, with the new Angular CLI you can generate components, routes, services and pipes with a simple command. Besides that, Angular is very stable and has support for great technologies like Typescript and Web Workers, etc., the new Ivy renderer is officially released in Angular 9. Although the framework has made huge improvements in file size and runtime speed since the days of Angular 2, Angular apps often tend to be on the heavy side when it comes to file size and memory use. Ivy aims to change this. Compared with the current Angular View Engine, Ivy provides the following benefits:

• Rebuild times are significantly faster
• Decreased payload size
• Better template type checking, so you can catch more errors at build time
• The code generated by the Angular compiler is now much easier for humans to read and understand

And it’s broadly compatible with existing Angular applications. It’s also great to know that Angular is so wildly used inside Google, and it’s comforting to know that these updates have already been released to production on dozens of sites across Google before it gets to the public.

Also pretty cool is @Scullyio, the static site generator for Angular. It’s still in beta but it looks very promising!

Web components

Pure web components are framework agnostic and can work without a framework. That’s why a lot of people think that web components are the future. They are free from JS fatigue and are supported by modern browsers.

Prominent tools to know in this space are StencilJS, Lit-HTML (and Lit-element) and SkateJS. But you can also use Angular or Svelte to create web components.

Although the idea of web components sound very promising, the reality shows that there are also some reasons why you should be careful about fully betting on web components. There are many articles were written about the subject, but when the creator of Svelte posted Why I don’t use web components it resulted in some interesting discussions.

Personally I’m not (yet) completely convinced about the idea of web components, but it’s for sure a technology that I keep on my radar.

There are many more interesting topics I would like to discuss, but let’s wrap things up here for now. Add some of your great tools for frontend development in the comments and follow me on twitter @jake_prins to stay up to date about my latest work.