It is an interesting time to be a web developer. On one hand, the web today provides a wealth of information, giving developers easy access to a number of resources useful when running into a problem or wanting to update their skills. Additionally, there are so many advancements being made to programming languages and technologies that web development provides a rich ecosystem for developers to build powerful solutions.
“The horizon for web developers has really widened in the last couple of years where we are able to choose literally what type of app we want to build and what type of experience we want to have,” said Sam Basu, developer advocate for app development solution provider Progress.
On the other hand, that rich ecosystem can also be fatiguing because there are now so many different technologies and languages to choose from. It can be difficult to decide what tools development teams and organizations should invest in — not to mention all the different form factors and other user demands web developers have to worry about.
“If you are new to the game, you may struggle with the number of options available to you. There are new frameworks coming up every day, so it ends up becoming a problem of too many options and too many riches,” Basu said. “For web developers, the canvas is broadening. We have other things to keep in mind as we are building applications and our code is reaching new forms that were never really meant for the web.”
Luckily, these problems are not going unsolved and there are currently a number of trends and solutions underway aimed at making web developers’ lives easier.
Progressive Web Applications
You may be a web developer, but your web development strategy can no longer just be the web, according to Jason Wong, VP analyst at the research firm Gartner. Users are accessing solutions on so many different form factors that organizations are now expected to provide a mobile experience.
An emerging trend developers and organizations are turning to is progressive web apps (PWAs), which have been on the rise for the past couple of years now, with 2018 being reported as their breakout year. When Apple announced support for service workers in the beginning of last year, it paved the way for PWAs. Now that we are in 2019, Wong explained we are now entering Gartner’s trough of disillusionment on the hype cycle. “It is just a matter of time, maturity and formation of standards across browsers and operating systems that is going to ultimately drive the entry into mainstream and slope of enlightenment,” he said.
PWAs give development teams the ability to use web technologies to build a mobile experience without having to go through the app store. According to Wong, PWAs are not meant to be a replacement for mobile applications. They are a replacement for bad mobile applications and can be a stepping stone to a broader mobile strategy. “Organizations that simply want to have a presence in the app store go about it backwards. They take what is already available or mobile friendly, and they wrap it and publish it as a hybrid app or a very basic mobile app to the app store. They don’t get the adoption or engagement they were looking for because they didn’t really think of mobile as a strategic investment,” said Wong. “The PWA approach allows them to take more of a toe-in-the-water approach to really understanding what it means to build an app-like experience.”
With PWAs, developers can take advantage of offline caching, notifications and more advanced capabilities users are looking for. Once they are comfortable with creating these types of experiences, they can go on to creating a mobile application. PWAs are a way to get familiar with mobile experiences without wasting time, resources or investment, Wong explained.
“Not everything needs to be a native app on mobile devices. If your application is mostly data-driven, you can get away with a PWA and have a nice immersive experience that is engaging to the user,” said Progress’ Basu.
Another strategy for PWAs is to retain users, added Max Lynch, CEO and co-founder for the web development solution provider Ionic. For instance, a website like Pinterest also has a mobile application available, but since they have a strong search engine presence, it doesn’t make sense to require users to download their app. “You don’t want to risk sending users to an app store when they can get the information right away in a quality way with a PWA,” Lynch said.
Programming languages
JavaScript is currently the de facto language for the web, according to Ionic’s Lynch. “JavaScript is going to continue to dominate the web for a number of reasons. A majority of developers know it. It is easy to use, and there is a bunch of momentum and inertia around it,” he said
Angular developer advocate Stephen Fluin of Google added that JavaScript just provides the ability to be everywhere. “You can run JavaScript on the web, on the server, and on mobile devices. That pervasiveness of a single technology makes it very attractive for developers,” he said.
However, JavaScript wasn’t really intended for all of these different purposes when it was originally created, Fluin explained, so a new programming language has been on the rise to help add to the credibility, maintainability and accessibility of JavaScript. TypeScript is an open-source programming language developed by Microsoft and designed to be a typed superset of JavaScript that compiles to plain JavaScript. According to Fluin, it enables developers to use existing JavaScript skills, and since it is a superset of JavaScript, it allows developers to gradually migrate to TypeScript without having to worry about a big rewrite. The reason developers are using TypeScript is because it provides the ability to write in modern JavaScript while taking advantage of types for things like static checking and code refactoring. “Types are optional, and type inference allows a few type annotations to make a big difference to the static verification of your code. Types let you define interfaces between software components and gain insights into the behavior of existing JavaScript libraries,” according to the TypeScript website. TypeScript 3.5 was recently released with new type-checking features and incremental build optimizations to improve speed.
According to Progress’ Basu, while JavaScript will pretty much do everything other languages can do, picking a programming language is still a matter of choice and convenience for developers and they may be more comfortable using other languages for the web. As a result, WebAssembly is gaining more interest. WebAssembly is an open web standard that enables higher level languages like C, C++ and Rust to run natively in the browser. “So far, for web applications to run natively in the browser, the only option has been JavaScript,” said Basu. “WebAssembly for the first time is opening up some other choice. It is essentially a low-level assembly language for the web.”
WebAssembly is currently supported by four major browser engines: WebKit, Firefox, Chrome and Edge. According to the WebAssembly team, WebAssembly will not replace JavaScript; it is designed to complement it. “While WebAssembly will, over time, allow many languages to be compiled to the Web, JavaScript has an incredible amount of momentum and will remain the single, privileged dynamic language of the web,” the team stated on its website. “WebAssembly modules will be able to call into and out of the JavaScript context and access browser functionality through the same web APIs accessible from JavaScript.”
A new standardization effort is currently underway to bring WebAssembly outside the browser. The WebAssembly System Interface (WASI) will provide the ability to run WebAssembly across different operating systems. “WebAssembly is already transforming the way the web brings new kinds of compelling content to people and empowers developers and creators to do their best work on the web. Up to now that’s been through browsers, but with WASI we can deliver the benefits of WebAssembly and the web to more users, more places, on more devices, and as part of more experiences,” said Sean White, chief R&D officer of Mozilla.
Open-source language automation
Bart Copeland, CEO of open-source languages company ActiveState, argues web development teams shouldn’t rely on using a single programming language. “There are so many different languages to work with today, it really depends on your specific use case, what you want to accomplish and the role of the organization,” he said.
For instance, the Python programming language is currently on the rise as developers are beginning to add things like artificial intelligence and machine learning in their applications as well as deal with the data analytics and data science that goes into building an application. However, it can be difficult to convince large organizations to invest in Python tools because it can be a costly investment.
“As developers are working on new applications, they want to use the latest and greatest technology, but organizations are saying we can’t have more disparate technology stacks so there is often a push to build your web app with a set of technology stacks that the organization has already invested in,” said Copeland.
A way around this is through open-source language automation, according to Copeland. Open-source language automation has four phases:
- Defining policies to ensure compliance across the entire organization;
- Centralizing open-source language dependencies to track languages and packages and access usage;
- Automating language builds to reduce vulnerabilities and increase app quality;
- Deploying and managing open-source language artifacts so your test, staging and production servers get automatically updated with the latest language builds.
“We believe you should be able to track when and where your applications were vulnerable, and respond with automatic enforcement of your open source language policies. Management should gain security and stability and your development teams should attain greater velocity,” said Copeland.
Performance
By now, the framework development area has matured with popular frameworks like Angular, React and Vue giving developers the ability to develop powerful solutions, according to Ionic’s Lynch.
Developers may still feel overwhelmed at times because of the fragmented framework landscape, but Google’s Fluin explained that is actually a good thing because as the major frameworks become more popular they are focused to stay up to date, innovative and flexible. “If we just stay static, we would keep shipping the same product year after year and not learning from the ecosystem, building on top of the ecosystem and working with the ecosystem,” said Fluin.
The problem is those frameworks ended up throwing a ton of code into developers’ applications, causing slow load times. While the app or solution may provide a bunch of cool and engaging features, it won’t mean anything to users if they have to wait for it to load, Ionic’s Lynch explained. Google has also started to crack down on slow apps especially in its search engine result rankings, so developers are now trying to optimize for performance by sending as little data or code as possible to get the app running.
Google created the Accelerated Mobile Pages (AMP) Project, an open-source initiative that aims to speed up web pages and improve user experiences across all devices and platforms. “Today, the expectation is that content should load super fast and be easy to explore. The reality is that content can take several seconds to load, or, because the user abandons the slow page, never fully loads at all. Accelerated Mobile Pages are web pages designed to load near instantaneously — they are a step towards a better mobile web for all,” according to the project’s website.
Ionic’s open-source project Stencil combats performance issues by generating reusable web components with a small code footprint. If a company is using a variety of frameworks, they no longer have to build different components for each one, Lynch explained. “Web development has yet to pick a framework winner. React is very popular, but if you call it a winner then you are missing most of what is happening in the enterprise where Angular is king. Then there are a whole bunch of people using things like jQuery,” said Lynch. “We aren’t achieving our mission, which is to empower every single web developer to build awesome mobile, desktop and web apps with our components, if we only work with one framework.”
The use of web components is attractive because it enables developers to reuse code as much as possible, according to Gartner’s Wong. Web components consist of three main technologies — custom elements, shadow DOM and HTML templates — which are capable of being used anywhere without having to worry about code collisions.
“The reality is these frameworks require specific knowledge. Web components aim to level the playing field a little bit for web developers because they don’t require them to have to learn a specific framework. It is all about understanding the underlying principles and the right architecture to consider in building a website or web app. Web components are a path for standardization and the ability to switch frameworks without having significant impacts,” said Wong.
In addition to Google’s AMP and Ionic’s Stencil, Salesforce recently released its open-source solution, Lightning Web Components, for creating web components across a variety of platforms. “The benefits are significant: you only need to learn a single framework and you can share code between apps,” Christophe Coenraets, principal developer evangelist at Salesforce, wrote in a post.
Another problem with web performance today is there are just too many versions of a language available. For example, Google’s Fluin explained older versions of JavaScript like ECMAScript 5 are required for older browsers while more modern browsers take advantage of modern versions of JavaScript. That becomes problematic because older versions of JavaScript don’t have all the same features so as part of the transpilation developers end up creating more code. “You would express a really simple concept like there is a class and then what would happen is that class would get translated into a language that didn’t have classes, which ends up adding a lot of burden size and performance impacts,” said Fluin. As a result, Angular created differential loading, a process that enables browsers to choose between modern or legacy JavaScript depending on the capabilities it supports.
Top web frameworks
- jQuery
- React.js
- Angular/Angular.js
- ASP.NET
- Express
- Spring
- Vue.js
- Django
- Flask
- Laravel
This is according to Stack Overflow’s annual developer survey, which looks at responses from nearly 90,000 developers worldwide. While a broad number of developers are using jQuery, this year more and more developers are switching to React.js and Angular, the report revealed.
Additionally, the report looked at the most loved, dreaded and wanted web frameworks. The top loved frameworks included React, Vue, Express and Spring, while the most dreaded frameworks included Drupal, jQuery, and Ruby on Rails. When it comes to the most wanted web frameworks for developers, the top frameworks included React, Vue and Angular.
