Tuesday, January 15, 2019

WEB DEVELOPMENT: WHAT’S BIG IN 2019? by: Ben James

I try to keep up with web development trends but it’s hard to keep pace since it’s such a fast evolving field. Barely a week goes by without the release of a new JS framework, elaborate build tool or testing suite — all of them touted as the one to learn. Sorting the hype from the genuinely useful is no mean feat, so my aim in this article is to summarise some of the most interesting happenings that web development saw in the last year, and what trends we expect to see more of in 2019.
A technology or framework doesn’t have to be brand new to be on our list here, it just needs to be growing rapidly or evolving in an interesting way. Let’s take a look!

LOOKING BACK ON 2018: SPA,  CSS GRID, AND SPEED

Single Page Applications (SPAs) saw a leap in popularity in 2018. A simple concept made possible by the power of modern Javascript, a SPA loads a page once then never reloads it or navigates to another page; instead, Javascript is used to manipulate the DOM and render new layouts in the browser. JSON data can be sent between the client and server, but the page behaves more like a desktop application than a “conventional” website. (Visit the websites of Gmail, Facebook, Apple and many more to see a SPA in action). It can provide a much snappier experience to the user and really transform the responsiveness of a site, but usually requires a sizeable chunk of code shipped to the browser. It’s an idea that’s been popular for a while but really saw a lot of developer engagement last year.
2018 also saw some long-awaited improvements to core web technologies. It’s fair to say that when HTML and CSS were conceived, they were not designed to handle the modern web. Hence, CSS preprocessors and libraries are rife, because they provide a more abstract, convenient interface to create and layout UIs. Bootstrap, the most popular front-end library, has a grid system which has been widely used to easily position content for years. 2018 brought the widespread adoption of a native CSS grid, supported by all major browsers; a big deal for headache-free aligning.
Something that was really taken to heart last year was how much mobile users care about page-load speed. In fact, Google even started including this in its ranking algorithms for search. Additionally, its “Open Source” Accelerated Mobile Pages (AMP) project continues to be popular but controversial for the amount of control Google has over it.

EXPECTED IN 2019 ON THE BACKEND:

First, let’s talk about some of the backend/server-side changes we can expect to see, before moving onto front-end technologies.

Containers

Ok, so this one certainly isn’t a new idea, but it’s a technology which is growing so fast that it’s impossible to ignore. These days, rapid deployment is the name of the game, which means your backend/server needs a consistent, repeatable environment. The goals of this is to make development, testing, and production seamless.
Containers also provide an awesome amount of modularity, which makes both development and maintenance very easy. Want separate containers for your application, database, compute workers and Redis? No problem; in fact, it’s encouraged. This makes it super simple to switch out different modules and scale your service as required.
Docker is, of course, the most popular platform for containerisation. I love using it and wrote a guide to Docker and containers if you’re curious about what’s under the hood.

Serverless

Closely linked to containers is serverless computing, and this is perhaps the biggest change that’s happening right now in terms of how websites and applications are deployed.
Serverless computing allows you to write and deploy code without ever touching the underlying infrastructure. Anyone who has deployed a website after manually setting up servers, load balancers, etc knows how much time configuring infrastructure can take away from time developing the app/website itself.
Serverless code is written as a number of independent “functions”, which are all event-driven. Each of these modules runs only when triggered, spinning down when not in use. The beauty of this is that you only pay your serverless provider for the computation which takes place: it’s effectively pay-as-you-go. If your site has a quiet period, you pay very little. But if you experience a sudden surge in demand, it’s very easy to scale your service by simply adding hundreds or thousands more module instances on the fly.
Ultimately, it makes it possible to scale your provisioning by network-usage, CPU or memory instead of units of “a new server”. On-demand computing is great for technical efficiency and maintenance, and it makes economic sense as well. 2019 is set to be an exciting year for new heights of adoption, as well as open-source serverless technology like OpenFaaS.

ON THE FRONTEND IN THE COMING YEAR:

Cool, those are some of the backend trends I expect to see, what about the front-end?

The web app becomes more modular by the day

There’s a reason that front-end development frameworks like Angular and React are so popular, and for the most part, it comes down to modularity. Writing large, monolithic files of HTML and JS, makes for code which is difficult to re-use between pages, slow to re-factor, and horrible to unit test. Instead, why not use a framework to create components, each with its own styling and scripting, and defined inputs and outputs. Not only does this make it incredibly easy to use the same building blocks again and again, but the codebase also becomes far easier to understand and plug into a test suite.
The reason I mention this is that there’s a new framework on the block which implements the component model so well that it’s enjoyed amazing growth in 2018.

Vue.js

Vue’s remarkable recent success will only continue. It’s done so well because it implements exactly what developers want, in a very lightweight package (see this size comparison with other mainstream frameworks). Its recent growth is a good indicator of where it’s going this year.
If you’re looking to improve your front-end development skills and haven’t learned Vue yet, it’s a solid place to start in 2019.

Is this the death of server-side rendering?

Ten years ago, the standard way to create a website was to render all the files server-side before sending them to the browser, using technologies like PHP and ASP.NET. Then Javascript frameworks/libraries started showing up, first slowly, then in a deluge. More and more parts of web applications shifted client-side, until we arrive at today, where it’s common practice to create a Single Page Application entirely in the browser.
That doesn’t mean that server-side rendering isn’t used today, far from it; many new applications continue to use it because it fits well with their requirements. Server-side rendering is well suited to largely static sites, as well as being great for SEO out of the box. On the whole, the decision between server-side and client-side rendering is a complex balance depending on network speed, the type of dynamic/interactive content on the site, and many more factors.
What does that mean for the future? Whilst server-side rendering is conceding ground today, it’s still a good fit for a large number of use cases; it’s not going anywhere for now.

Progressive Web Apps (PWA)

There are some interesting statistics on apps vs websites on mobile devices. Whilst mobile sites receive about 12x as many visitors as apps, users spend roughly 20x longer on apps than mobile sites. What if there was a way to get the user engagement of an app without the friction of installing one?
A Progressive Web App, or PWA, is simply a term for a website which fulfills a set of requirements and best practices, predominantly for mobile use. PWAs should load reliably and load fast, with snappy navigation and identical feel to a native app. They are designed to be added to the home screen of mobile devices and are capable of operating offline.
Google turns out to be a big fan of PWAs; Chrome will automatically prompt users to add a website to their mobile home screen if it meets the PWA criteria. They also created an open source tool, Lighthouse, for auditing your site to PWA standards and integrating into CI workflows.

PROVE ME WRONG, 2019

2019 is set to be an interesting year for web developers and users, with exciting technologies at the front-end and back-end. If you have any predictions, be sure to leave them in the comments, we’d love to hear what you think. And of course, I’ll be coming back to this thread in a year to see if we got it right!

No comments:

Post a Comment