Top Web Development Trends for 2016
The web dev world is dynamic and constantly changing. Trends can go from sizzle to simmer in a Flash (pun intended). Let’s look at web development trends that shaped 2015 and what we see on the horizon for the remainder of 2016.
The Hottest Web Development Trends – 2015
Positive Reaction to React
- virtual DOM implementation
You simply describe how DOM should look and React does all the heavy lifting.
The Biggest Bang
The Rise of HTTPS and HTTP/2
Security continued to be a major factor in 2015 with the continued migration of sites to HTTPS. HTTP/2 was finalized in February and ended the need for sharding and sprite files for icons. In one of those strange quirks of fate, best practices under HTTP become their own antithesis under HTTP/2. Since the new protocol requires implementation on both server and browser end, the world has had time to adapt.
Most Famous Fatality
Compass died and autoprefixer was born. Compass was previously a popular tool, but autoprefixer is better. It actually searches through your CSS files for rules that are not compatible with all browsers and then adds all the rules that are needed to make the rule work with all browsers. With a decreased need for image spriting due to HTTP/2, Compass is now out to pasture.
Bootstrap Turns to Sass
The New Mainstream
Of course, it’s flexbox! We saw a huge number of interesting flexbox use-cases, demos, and tutorials in 2015. Another thing that left its mark last year was a round display. Thanks to smartwatches, round displays have become so popular that W3C extended CSS for round displays.
The Biggest Web Dev Predictions for 2016
Enough reflecting on the past. That was so last year. As the first quarter winds down, here’s what we see ahead for the rest of 2016. Spoiler alert: it’s going to be awesome!
CSS Grid Layout
Say good-bye to complicated layouts based on ethereal floating elements and hello to more simple and clean solutions. We think the CSS Grid Layout will become more popular than flexbox for headers, footers, and sidebars. Here’s why:
- Grid can be set before the content loads for better rendering and performance
- Elements can be positioned in rows and columns
- Elements can be managed with different methods
- Column height management and vertical centering without hacks!
Grid layout won’t replace flexbox but the two can work and play together. Flexbox will continue to be better for the layout of forms and widgets but the CSS Grid Layout will be more effective for creating page layout.
BEM is a great toolkit to address and resolve front-end issues quickly. Isolated components takes it a step further. You get an isolated component when you slice a design file into tiny fragments and save their CSS and JS in one folder. The new isolation approach includes an automatic isolation of selectors, local reset, and media-queries for the component. Selector isolation in 2016 is automated with the implementation of the latest CSS Modules and JS.
Service workers are scripts run by the browser in the background and they are a powerful tool in taming the mobile web. They are perfect for push notifications, geofencing and more. They do require HTTPS but soon everything will require HTTPS. There is no doubt that service workers will get more widely used in 2016.
Native CSS Variables
2016 will be the year of CSS Custom Properties. Native CSS variables (technically CSS Custom Properties) are dynamic and they’re scoped to the DOM. They aren’t preprocessors and their syntax is ugly, but you can do some great things like defining the gutter area on a responsive layout with much less code.
Death of Flash
Flash has long been a favorite target of criminal hackers because it is everywhere on every platform and it’s famous for its security vulnerabilities. Adobe signaled in a small way, that Flash will be replaced by Animate CC. While Flash may not disappear right away, there soon may be a time when it is no longer the dominant platform.
Hey guys! What do you think? What will be the next big thing in web development? Please share your predictions and comments!