Frontend Engineering. Beyond Frontend Development
The now of front end development

Modern Front end development transcends beyond writing the traditional HTML, CSS and JavaScript. There are a lot of skills and tools a modern front end developer should have to aside from the traditional HTML, CSS and JavaScript. These skills will gives you the ability not only to develop but also to engineer world class products. In

As Michele Riva puts it in his article Front end Development is Dead. The old way of building for the web is long gone.

In this article, I’ll introduce you to practices, technologies and tools that will make you stand out as a front end developer

#Front end Networking

Frontend Engineering. Beyond Frontend Development

#Web Accessibility

Accessibility (or a11y for short) is the practice of making products easy for users to use and interact with regardless of their condition or impairment. A11y encourages developers to create intuitive user experiences that makes user interaction with the web feels more natural.

Web Accessibility tips:

  • Include proper alt text for images.

Use alt attribute to provide meaningful description of images

<img src="https://res.cloudinary.com/ejiro/image/upload/glasses.png alt="blue light anti glare computer glasses" />
Frontend Engineering. Beyond Frontend Development

The value in the alt attribute will accessible to screen readers and it will be displayed if the image fails to load. If images are for decorative / styling purpose only, you may leave alt attribute value empty but always include an alt tag.

  • Accessible formsEnsure each form fields have its own explicit label tag. Associate input elements with label tags using the for and id attribute for the label and input elements respectively. Ensure the for and id attributes’ values matches
<label for="email">Email</label>
<input type="email" id="email" name="email">

Use appropriate input type. Check this out for more

#Progressive Web Apps

Progressive web apps (or PWA for short) is an application software that looks and feels like a native application but it’s built with core web technologies, including HTML, CSS and JavaScript. PWAs are made possible through the web manifest and service worker. It is designed to work on any platform that uses a standards-compliant browser.

As a modern front end developer, the ability to build PWAs that are available offline through caching, launchable from homescreen, offers push notifications will make you an outstanding developer. Below is a snippet of what makes a basic PWA possible.

index.html

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js')
    .then(reg=> {
      console.log('Registering service worker...', reg);
    })
    .catch(err => {
      console.error('Registration failed:', err);
    });
  });
}

service-worker.js

self.addEventListener('install', event => {
  console.log('installing service worker...😎');
  self.skipWaiting();
});
self.addEventListener('activate', event => {
  console.log('Service worker activating...');
});
self.addEventListener('fetch', event => {
  console.log('Fetching:', event.request.url);
}); 

Learn more about PWAs here

#Web Performance

Web performance refers to the speed with which web pages are rendered on users’ browser. Some developers careless about the load time of a webpage as long as it “works” but as a developer who want to build world class products, web performance optimisation skill is important

Useful tips and tools

<link rel="preload" as="script" href="high-priority.js">
  • make use of web storage APIs for offline capability of your app
  • Analyse your page speed performance using tools like PageSpeed Insights, GTMetrix
  • Use only images that are needed
  • Reduce the number of HTTP request on your web app

#NPM

Node Package Manager (NPM for short) is a package manager for JavaScript and it’s also the default package manager for the Nodejs. A modern front end developer should be able to install npm packages and use them to develop products efficiently. It is unlike for one to be considered a front end devleoper in 2020 and beyond without being able to use NPM packages.

You don’t have to create your own packages, 90% of the time, chances are that packages to solve your problem and boost your developer experience already exist in the NPM registry. Most of the times you’re like going to be installing npm install express --save, uninstalling npm uninstall express --save dependencies and using them to build feature-rich web apps.

Popular packages on NPM registry are

  • React
  • Express
  • Webpack
  • Vue
  • Axios
  • Babel runtime

#Conclusion

Front end engineering has never been more interesting and challenging. A whole lot more than the traditional HTML, CSS and a bit of JavaScript is expected from front end engineers. I hope I have been able to convince you to level up from just being a front end dev to becoming someone who can engineer web applications.

Thanks for reading. Follow me on twitter if you like