2019 was a great year for front-end development, with new frameworks, libraries and tools appearing left right and centre, this boom has seen the numbers of front-end developers grow exponentially and makes 2020 look like an exciting year for front end dev.
Top 5 Trend Predictions for 2020
WebAR
AR or Augmented Reality is an interactive experience of a real-world environment, where real-life objects are enhanced by computer generated graphics. AR gives users a totally different way to connect to the world around them, and allows businesses to reach out to their customers in an engaging, exciting format.
With Safari now allowing developers to hook into more native device functions, 2019 saw more developers making use of this. A great example is the First Man website which, in Safari, uses the devices Accelerometer and Camera to take users on a journey to the Moon.
The First Man website, through Safari, accesses the users Camera and Accelerometer, showing them the real world around them, mixed with a UI prompting them to find the moon.
Video
Video is a great way to captivate users and show your products and services in a different format and many recent websites are showing you can convey messages in video clearer than text, a great example of this would be Active Theory, who in 2019 won site of the year for their Three.js based website, on which each project showcases use of the website via a video instead of mock-ups and screenshots.
JS Animations
With creative websites becoming easier and easier to get a hold of with a theme or template, bespoke websites now have to really stand out of the crowd, and a great way of doing this are through animations on the website. Libraries like Anime.js allow developers to make beautiful, staggered animations via CSS properties easily. This codepen is a great example of a staggered Anime animation.
3D Graphics libraries – Three.js
Three.js is another library that has massively grown in popularity in the last few years, and the trend is set to grow in 2020.
Three.js is a lightweight, 3D library which makes WebGL easier. WebGL is an API that allows you to access your computer’s graphics hardware via Javascript and render into a element. Originally, you could only access that hardware though desktop software, and other than Adobe Flash, browsers could only really make use of 2D animations.
There are thousands of tutorials spread across the web, and due to sites like Awwwards showcasting uses of Three.js regularly, use of the library is rising year on year. Three.js gives developers the opportunity to make websites seriously cool and engaging, and possibilities are endless for what can be done with the framework.
Front end Frameworks
Mid 2019, usage of React skyrocketed, and it was the most downloaded NPM package during that year, however after the boom, React usage settled down whilst usage of Vue.js has steadily risen month on month since then. Statistics from W3Techs would indicate that real world usage of Vue and React is much closer than you’d think. The advantage of Vue.js being so easily implemented into Laravel as well as the easier learning curve is making it a popular framework to be tacked by developers who are trying out their first front end framework. Front-end frameworks can now also be used with WordPress via the WP REST API allowing developers to use WordPress as a headless CMS, and make their sites SPAs (Single Page Applications).