Future of FE

Patrick Whitehouse | April 25th 2018

Over the past seven or so years, I have seen first hand how front end technologies have changed and advanced. Websites have gone from using barebones and basic PHP, HTML, CSS and the occasional bit of JavaScript to using front end frameworks such as React and Vue that rely heavily on JavaScript.

I believe there is an exciting year ahead for web developers, especially for us front end developers. Without a doubt there will be even more technologies introduced in 2018 which will benefit us and our workflow. However, I predict the trends in 2018 will be very similar to 2017.

Here are the tools and technologies that I think will be making regular appearances throughout 2018.

CSS Grid

CSS grid is a display property that has been the subject of talks for a while now. The reason that a fair few people haven’t heard of this property is because not all browsers support this feature … yet! CSS Grid allows for rapid prototyping and developing complex websites by using minimal code. Although grid is not 100% supported yet, a handful of global companies are using grid in production, an example being Stripe who use it on their product page. See https://stripe.com/connect. Grid also works hand in hand with flex properties which is a frontend developer’s dream! A good resource for learning CSS Grid is Grid by Example, published by Rachel Andrew – https://gridbyexample.com/

JS Frameworks

With JavaScript being one of the fastest growing languages, it’s only right that I give JavaScript frameworks a mention here. Frameworks such as React and Vue are already extremely popular, which means there is a large community who can provide support and guidance whenever a developer needs it. I believe this is one of the main reasons they’re so popular and why the community will continue to grow in 2018. With progressive web apps on the rise, I am excited to see what can be produced with different JavaScript frameworks in 2018.

Progressive Web Apps

Progressive web apps are relatively new and over the past couple of years, Google has been trying to push developers to develop PWAs as they react in the same way a native app does, but they’re delivered through the device’s browser. PWAs can also produce push notifications and they also have the ability to work offline unlike a standard responsive website. Other advantages of PWAs are that they are low on data and the user will always get the latest version upon their visit, unlike a native app which needs to be manually updated.

Web Animations

With most browsers now supporting complex CSS properties, including CSS variables, I believe web animations will become prominent in 2018. CSS can now enable us to create nice animations, including parallax effects, by using CSS variables and minimal JavaScript. Take a look at https://basicscroll.electerious.com/. Animations not only help spice up a website, they also help contribute to a better user experience, which is what every developer and brand wants.

Static Site Generators

I had never touched a static site generator until a few months ago when I was redesigning my portfolio. I have always used WordPress when creating small and compact websites, even if the site only consists of a handful of pages, as pages can be updated with ease when using a CMS such as WordPress. Recently I questioned myself as to whether there was an alternative, as my current site was slow and I felt WordPress wasn’t really ideal for such a minimal site. I came across a static site generator named Jekyll. I now use Jekyll in combination with GitHub pages (GitHub pages is already powered by Jekyll). As Jekyll doesn’t rely on any databases unlike WordPress, I can now deploy any site built with Jekyll within seconds of making a change. Jekyll and other static site generators work in a similar way to content management systems, for example allowing for custom page templates and partials. However, unlike a CMS, there is no “back end” as such in a static site generator, but this doesn’t change my opinion on them!