My tech trends of 2020
Tags: webdev, javascript, svelte, frontend
Published: 2021-01-18 10:21:54

That’s it! 2020 is over and it's time for me to share my trending topics of the past year.
Here is the list of technologies about which I spent a lot of time reading, watching videos or listening to podcasts. It does not include all technologies I worked with but only the main, those at the heart of my tech watch.


# Svelte

For sure my top 1! 🏆

I've been very interested in [Svelte](https://svelte.dev/)  for two years now, in fact since the release of version 3. I like the syntax, the simplicity and the technological choices that have been made, mainly to improve the developer's experience. I also like the way it grows and the emulation that surrounds it. The community is great and growing every day. Just take a look at [the discord server](https://discord.gg/9pU4wRJz) ;)

I spent a lot of time working with Svelte on side projects and also in the Svelte source code! I really enjoyed diving deep into it and discovering how a project like this is built. Obviously, it also helps me a lot to understand how it works and makes me appreciate the project even more.

During this year, I also wrote and spoke about Svelte :

- 📝/🏴󠁧󠁢󠁥󠁮󠁧󠁿 [Svelte, why so much hype ?](https://dev.to/zenika/svelte-why-so-much-hype-2k61) 
- 🗣️/🇫🇷 [Svelte, pourquoi tant de hype ?](https://www.youtube.com/watch?v=b4U2vxdADg4&ab_channel=ZenikaTV)
- 🗣️/🇫🇷 [Svelte, le framework qui sauve les bébés phoque](https://www.youtube.com/watch?v=p9KZILKv5E4&ab_channel=SvelteSociety)

I even organized with my colleague [Karine Sabatier](https://dev.to/karinesabatier) the French chapter of the [Svelte Society Day](https://france.sveltesociety.dev/) in september. It was such a great event and so fun to organize! We held a 4-hour event with 11 talks for the Svelte's French-speaking community and even a quick video in French from Rich Harris himself, the creator of Svelte! 😍

{% youtube chATDP95QCw %}

# Vue.js 3

The release of [Vue.js 3](https://v3.vuejs.org/) has been for me one of the best news in the front-end ecosystem this year! There are so many great features that make me love the project more than I did in the past: reactivity, composition API, multiple v-model, Suspens, Portal, ...
The project is still led by Evan You -who is still at the cutting edge- always looking for improvements for the framework he created 6 years ago.
Moreover, he seems to be inspired by Svelte (see [RFC#222](https://github.com/vuejs/rfcs/pull/222), [RFC#227](https://github.com/vuejs/rfcs/pull/227), [RFC#228](https://github.com/vuejs/rfcs/pull/228)). Based on the feedback from the community, this could be quite controversial but to me it's good news because it might beautify the syntax.

# Nuxt.js

Part of the Vue.js ecosystem, [Nuxt.js](https://nuxtjs.org/) is a framework built on top of Vue.js that allows Server Side Rendering and Static Site Generation.

Server-side techniques are becoming more and more important in the web ecosystem for obvious performance reasons. And when it comes to optimizing web performance, here I am! I think that frameworks like this one, that care about performance without neglecting the developers experience push the web in the right direction. That's why I tried Nuxt.js this year. I loved it and can't wait for version 3! By the way, you can watch this video, [the State of Nuxt](https://www.youtube.com/watch?v=NyeFQ3JmDEk&ab_channel=VuejsAmsterdam), if you want information about Nuxt v3.


# Web Components

Year after year, it's still a subject which is at the heart of my tech watch. I have worked with them a lot in the past and I continue to follow how the Web Components ecosystem evolves.

In particular, I follow the [LitElement project](https://lit-element.polymer-project.org/) (and [lit-html](https://lit-html.polymer-project.org/)), which is part of the [Polymer Project](https://www.polymer-project.org/). I'm also interested in the adoption of Web Components. It doesn't seem to be used as much as I thought a few years ago, but a dedicated post would be needed to analyze why. However, some companies use them a lot. And this year, I've especially noticed the fact that SpaceX sent Web Components into space (see [this Reddit thread](https://www.reddit.com/r/spacex/comments/gxb7j1/we_are_the_spacex_software_team_ask_us_anything/ft6bydt/)). 


# TypeScript

I’ve been using it for many years now, since 2014 and the release of the alpha of Angular 2 in fact. TypeScript continues to grow in popularity (see [StateOfJS 2020](https://2020.stateofjs.com/en-US/technologies/javascript-flavors/)) and I recommend his usage in many contexts because, to me, it facilitates teamwork and helps JavaScript developers build more robust applications.
The Microsoft team released 4 versions of TypeScript in 2020: [3.8](https://devblogs.microsoft.com/typescript/announcing-typescript-3-8/), [3.9](https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/), [4.0](https://devblogs.microsoft.com/typescript/announcing-typescript-4-0/), [4.1](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/), including many very interesting features. Check out the [roadmap](https://github.com/Microsoft/TypeScript/wiki/Roadmap) for incoming features!

# Cypress

How to get a really nice end-to-end testing experience? Easy: just use [Cypress](https://www.cypress.io/). What a nice testing framework! I really enjoy using it and I advise all front-end developers to give it a try. In the past, end-to-end testing was a bit difficult and this has influenced the way we test applications. Today, with the help of tools like Cypress, I'm pretty sure we are going to change our testing approach to make it more end-to-end focused.

The Cypress Team did an incredible job in 2020 and released new versions at a very steady pace: from version [3.8.2](https://docs.cypress.io/guides/references/changelog.html#3-8-2) to... [6.2.0](https://docs.cypress.io/guides/references/changelog.html#6-2-0!). The announcement of a [$40M raise](https://www.cypress.io/blog/2020/12/17/cypress-raises-40m-series-b-round-led-by-openview/) is good news and I wish Cypress an awesome year 2021.

# Tailwind CSS

I'm not a big fan of CSS frameworks, mainly because using a CSS framework feels like removing a part of my work that I really love: writing CSS. I like CSS, I'm good at using it, I'm efficient and using something that I didn't build is always more difficult. However, I know that writing CSS is not a piece of cake for all developers and that's why I also look at CSS frameworks. In 2020, I saw the emulation around [TailwindCSS](https://tailwindcss.com/) (see [StateOfCSS 2020](https://2020.stateofcss.com/en-US/technologies/css-frameworks/)) and I decided to lift the hood to understand the hype and to be able to help teams I work with.

It was a great surprise, I enjoyed using it more than I thought even if I'm still not super convinced, not enough to use it on my own projects. I'm still thinking that I'm more efficient with my own CSS 😅. But, I have to recognize, it's a good product. I understand why people use it: it's easy to use and lets you quickly prototype an application without writing a line of CSS.
Well done [Adam Wathan](https://adamwathan.me/)! 💪

# Gitlab CI/CD

Out of the frontend ecosystem, I worked a lot with [GitLab CI/CD](https://docs.gitlab.com/ee/ci/) in 2020. Before that, I was used to working on it but only as a "simple user", I didn't expect all the empowerment it brought to me nor how fun it could be to work with. I added it to my tech watch and dove into some advanced features. It was really cool and I will continue to work with it.

# Flutter

I tried [Flutter](https://flutter.dev/) during the first lockdown in France, in March, and it was a great discovery. I wanted to try something different, another language than JavaScript that I used a lot. I was quite afraid about Dart and the way we do templating in Flutter but finally, I liked it! I quickly found my marks and interesting resources in the [Flutter documentation](https://flutter.dev/docs) to effectively increase my Flutter competence.

Yet, I did not have the opportunity to work with it professionally (I hope I will) but I continue to use it on side projects, I still read about it and check the news regularly: the [Flutter Medium](https://medium.com/flutter) is a good place to find many interesting articles.


# Sustainable IT

During 2020, I have read a lot about Sustainable IT, at first seeking answers on websites' environmental footprint. Then, I looked for guidelines to make the applications/website I built more "green".

I enjoyed what I've read because it brings me back to the web fundamentals. To me, it's satisfying to build websites while trying to have the minimal environmental footprint possible. It is of course because of the sustainable goal but also because of the technical challenge: working out of the complexity of the front-end ecosystem, with the minimum of JavaScript code, without frameworks, makes you think differently and leads to focusing on essentials.

If I can sum up in just one sentence what I've learned about building low impact websites in 2020, it could be "Do I really need this website/feature ?".

# The rest

I had many other technologies in my tech watch in 2020:
- [React](https://reactjs.org/), because it's still a framework I like to work with.
- [Angular](https://angular.io/), mainly because I wanted to understand precisely how [Angular Ivy](https://angular.io/guide/ivy) works (based on incremental DOM).
- [Rollup](https://rollupjs.org/), because I wanted to explore an alternative for [Webpack](https://webpack.js.org/).
- [Snowpack](https://www.snowpack.dev/), because of [SvelteKit](https://svelte.dev/blog/whats-the-deal-with-sveltekit).
- [Core Web Vitals](https://web.dev/vitals/), because it combines web performance and user experience, two important subjects for me.
- Web accessibility, more and more a subject I'm passionate about, pushing the front-end developer experience even more.
- CSS, SEO, [Github actions](https://github.com/features/actions), [ArcGIS JS API](https://developers.arcgis.com/javascript/), [Warp 10](https://www.warp10.io/) and more...