Front-End Development Best Practices
Overview Guide for Beginners
Front-end development is a broad term that encompasses a broad scope of practices. In a world where new technologies are introduced and adapted at a fast pace, it is sometimes difficult to keep up with all the trends. As front-end experiences shift from traditional desktop browsers to mobile devices and rapidly expanding fields like virtual reality and AI, it takes a lot of talent, skill, and expertise to stay relevant, keep your customers engaged, and keep your teams productive. This post is intended for newbies who are looking to fully equip themselves with the best front-end development practices.
Languages
Similarly, any new front-end developer for software or apps will need to know the basics of web development. There are three main programming languages that are an essential part of the web developer’s arsenal: HTML, CSS, and JavaScript. Each language has unique characteristics and uses that are important in understanding and creating an effective webpage. Furthermore, these languages give you the ability to pick up any new framework and library in no time.
HTML
HTML stands for "Hypertext Markup Language," and as guessed by the name, it is indeed a markup language. Markup language refers to a text-encoding system consisting of a set of symbols inserted in a text document to control its structure, formatting, and the relationship between its parts. HTML consists of a series of elements that, when collected together, tell the browser how to display the content and structure of the web page.
Sources to learn HTML: W3School, FreeCodeCamp, TeamTreeHouse, etc.
CSS
CSS stands for "Cascading Style Sheets." Cascading Style Sheets is a language used to describe a document's presentation in a markup language such as HTML or XML. It is a language that makes HTML look better.
Sources to learn: FreeCodeCamp, W3School, etc.
SCSS
SCSS stands for Sassy Cascading Style Sheets. It is a more advanced version of CSS and cuts lots of duplicates. In general, browsers do not know how to process SCSS features such as functions, mixins, and nesting. The SCSS file would need to be converted into a CSS file for the browser to understand. However, SCSS files do not extend the CSS standard itself.
Sources to learn: TeamTreeHouse, Sass Lang Documentation, BEM SCSS Tricks
JavaScript
JavaScript is a scripting or programming language that allows you to implement complex features on web pages—every time a web page does more than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2D and 3D graphics, etc. It is considered the "King of Web Development" and is probably one of the most popular languages among web developers. It’s also the only language that allows you to create web applications, both frontend, and backend, as well as mobile applications (although I still recommend native Swift for iOS apps).
Sources to learn: W3School, Mozilla Dev, etc.
Frameworks
Web frameworks (WFs) are software frameworks that support the development of web applications, including web services, web resources, and web APIs. Frameworks provide a standard method for developing and deploying web applications. According to the NPM statistics, the three most popular frameworks are React, Vue, and Angular.
React
React is an open-source JavaScript framework that isn’t actually a framework. React started as a side project to help Facebook products, and it was initially intended to be used with Facebook as a library. React does not enforce strict rules around code conventions or file organization. This allows teams to set conventions that work best for them and to adopt React in any way they would like to. There is a long discussion of whether react is a framework or a library but this post has no intention to go deep into details
Sources to learn: React Documentation, Udemy, CodeAcademy, etc.
Vue
Vue.js (or simply Vue) is a lightweight JavaScript framework for building reactive web user interfaces. Vue extends standard HTML and CSS to create a suite of powerful tools for building the front end of interactive web applications. Operating within the model-view-ViewModel (MVVM) framework, the main library of Vue focuses on the ViewModel layer, providing reactive synchronization between the model and view layers via two-way data binding. This simplifies the creation of modern web apps based on the single-page application (SPA) model.
Sources to learn: Vue Documentation, W3School, etc
Angular
Angular is an open framework and platform for creating Single Page Applications, written in TypeScript, and supported and developed by Google. Angular was initially supposed to be version 2 of the popular AngularJS framework. Still, design decisions made Google decide to release it as a separate entity, including the lack of backward compatibility and the simple update path of applications written in AngularJS to Angular 2. Angular is released under the MIT license. Angular has apparent advantages as a framework while also providing a standard structure for developers to work with. It enables users to create large applications in a maintainable manner. Most enterprise applications use the Angular framework.
Sources to learn: Angular Documentation, Angular Bootcamp, Angular Templates, etc.
Libraries
Programming libraries are useful tools that can make a web developer’s job more efficient. They provide pre-written, reusable chunks of code that developers can use to create applications quickly and easily.
GSAP
Green Sock is a robust Javascript library for animations. It helps developers build an animation in a faster and easier way. It provides animated colors, beziers, CSS properties, arrays, and a lot more. GSAP is compatible with HTML, SVG, React, Vue, Angular, jQuery, Canvas, CSS, new browsers, old browsers, mobile, and more. It defines callbacks, builds sequences effortlessly (even with overlapping tweens), repeat/yoyo and so much more.
Sources to learn: GSAP Documentation
Fundamental Library
Fundamental Library is an open-source and community-driven project to provide a consistent user interface across web applications. With accessibility, performance, and collaboration at the forefront, Fundamental Library continues to deliver modular and flexible components that are accessible and easy to implement.
The Fundamental Library supports different open-source frameworks like Angular, Vue, and React.
- Fundamental Library Styles: This is a lightweight presentation layer that can be used with developers’ UI framework of choice (e.g. Angular, React, Vue, etc.). Developers can build consistent Fiori apps in any web-based technology by combining Fundamental Styles, Library of stylesheets, and HTML tags.
2. Fundamental Library NGX: This is a set of ready-to-use Angular components built using Fundamental Library Styles.
3. Fundamental Library React: This is a set of ready-to-use React components built using Fundamental Library Styles.
4. Fundamental Library Vue: This is a set of ready-to-use Vue components built using Fundamental Library Styles.
Sources to learn: Fundamental Library Styles, Fundamental Library NGX, Fundamental Library React, Fundamental Library Vue, Fundamental Medium Publication.
Video.js
Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML video and modern streaming formats, as well as YouTube, Vimeo, and even Flash (through plugins, more on that later). It supports video playback on desktop and mobile devices. The project was started in mid-2010 and now has hundreds of contributors and is used on over 450,000 websites.
Sources to learn: Video.js Documentation
Luxon3
Luxon3 is a powerful, modern, and friendly wrapper for JavaScript dates and times. It contains class and instance methods for creating, parsing, interrogating, transforming, and formatting them.
Sources to learn: Luxon Documentation
Content Management System
A content management system is computer software used to manage the creation and modification of digital content. A CMS is typically used for enterprise content management and web content management.
Drupal
Drupal is used to create flexible, scalable custom content management systems that can easily integrate into any digital application and support a flexible content architecture.
Sources to learn: Drupal Documentation, Drupalize, Udemy
Kentico
Kentico is used to build multichannel e-commerce and online marketing experiences and internal collaboration platforms on this robust .NET-based CMS technology. It uses ASP.NET and Microsoft SQL Server for development using Visual Studio, or Microsoft MVC.
Sources to learn: Kentico Free Trial, Udemy, Digital Market Place
Umbraco
Umbraco is used to create flexible and user-friendly custom content management systems on Umbraco, another open-source, .NET-based CMS technology. Umbraco is an open-source content management system platform for publishing content on the World Wide Web and intranets. It is written in C# and deployed on Microsoft-based infrastructure.
Sources to learn: Umbraco, Udemy,
Conclusion
Mastering the front-end development tools is not going to happen overnight. Although this post gave an overview of what a new front-end developer might find useful to get started. It is vital to pick any software technology that fits well with the project/business goals.
