Frontend Development Essentials

Oftentimes people ask me on where to start with to become a frontend developer. I generally give them an overview and suggest to befriend Google. But what I figured out lately is that Google apparently overwhelms you with tons of results for each keyword and confuses you more than educating! This post is a broader level roadmap and assistance on the same note. UI development is an ocean, this one is just a drop near the shore. 

Basic Pillars of Frontend Development-

• HTML 

Hyper Text Markup Language (HTML) is a markup language that allows you to structure the information that is displayed to the user. Its the An HTML document consists of elements each represented by an HTML tag, such as a heading, a paragraph of text or a text input field. HTML documents can also link to other documents using hyperlinks. Each tag carries its own type of content, has a certain appearance and attached behavior.

• CSS

Cascading Style Sheets (CSS) is a styling language used to describe the visual appearance of HTML elements. It can be used to controls aspects like the positioning of an element, its dimensions, text style or colors, or almost any other visual aspect of a website. Styles are defined as a set of rules that can be applied to a single element of a subset of elements on the page.

Preprocessors

Preprocessors extend the capability of CSS to make your CSS code base simpler and maintainable. Various preprocessors like SASS/SCSS, LESS, PostCSS can be leveraged for this purpose.

• Javascript

JavaScript (JS) is the most used programming language for developing user interfaces for the web. It allows you to add custom behavior to your websites, such as reacting to user events, loading data from web services and showing or hiding elements on a page. It also allows you to interact with the browser through various APIs. You can use it to both add separate interactive elements to your website or create complex web applications.

Plethora of Tools

• PACKAGE MANAGER- NPM

• TASK RUNNERS- Webpack, Grunt, Gulp

• ONLINE CODING ENVIRONMENTS- StackBlitz, CodePen, JSBin

• CODE EDITORS – Atom, Visual Studio Code, Webstorm

• FRONT-END ASSETS- Google fonts, FontAwesome, Unsplash

• DEVELOPER TOOLS- Chrome Dev Tools, Firefox Page Inspector, Microsoft Edge Developer Tools and Safari Web Inspector

• CODE LINTING- ESLint, JSLint, CSS Lint

Modern Frontend Libraries

React  is a user interface development library developed by Facebook. React is based around creating components, such as a button or a side menu, that can render HTML based on input parameters. React components are written using an extension to JavaScript called JSX, that allows you to conveniently combine JavaScript code and HTML. Components can be composed together to create complex UI elements and whole applications. React is not a framework per se, it only provides the view layer, however, its rich ecosystem of tools and libraries.

Angular is another JS framework for developing user interfaces. It is developed by Google, based on typescript, and is component oriented. It provides most of the things you’ll need to build a web application including a CLI tool to bootstrap, develop and build the project as well as libraries to manage forms, data loading, routing, etc.

Vue.js is a framework designed to be modular and incrementally adoptable. You can start using it as a view layer and add additional libraries as you need them.

General Best Practices

Modern Javascript frameworks are evolving quickly to meet the high-end needs of user experience and upgraded development environments. Yet, to leverage them at their maximum potential, one needs to follow a set of standard practices.

1. Clean Code 

Clean code should be elegant and pleasing to read. It should be focused, and you should take care of it. All tests are run in clean code. They shouldn’t contain duplications, and the use of entities, such as classes, methods, and function, should be minimized.

2. Keep your code organized

We need a directory structure that will make it easy to

•         add things as we go,

•         keep the size of our modules manageable,

•         And keep everything in an easy-to-navigate, logical structure.

3. Simplicity

Any software should be created in the most efficient way without unnecessary complexity. Simpler answers are usually more correct, and this thought perfectly meets the needs of the development process. Simplicity coincides with minor coding principles such as Don’t Repeat Yourself (DRY) or You Aren’t Gonna Need It

4. Consistency helps a lot because colleagues will be able to test, edit or continue the work of each other. Vice versa, inharmonious projects can confuse your team and slow down the development process. Here are some tools that will help you enforce a single style:

-> Editorconfig: A system for the unification of code written with different IDEs,

-> ESLint: A highly customizable linter based on node.js,

-> HTML Tidy: Another linter for HTML which also finds errors and;

              -> Stylelint: A linter for CSS with various plugins.

-> Pre-commit hooks- They ensure code isn’t committed unless it meets certain requirements like, linting, testing, commit message of a particular format etc.

5. Accuracy over speed: Focus on correct code instead of fast code. Later it will be easier to speed up processes than rewrite everything and;

6. Experience sharing: Consider exchanging ideas and results with other developers to get external reviews if your project isn’t confidential.

7. Testing

No untested code should find it’s way to production. It’s better for any developer to integrate tests in the development workflow whenever possible.

One can differentiate between test cases like:

a. Unit tests

Testing a single component or function in isolation.

b. Integration tests

Testing interactions between components.

c. End-to-end test

Testing full-blown user flows in the browser.

8. Defining a highly scalable folder structure 

Defining a highly scalable folder structure is recommended  when you aim to build a scalable Angular app. I would suggest you practice a folder structure that is fit for all real-world examples with progressive addition of cases with time if not at the initial phase.

9. Checklist

Maintain a checklist to test the following-

a. Typography- Ensure that the UI matches the prototype. The visual correspondence, the position of the elements, and the distance between them should be similar to those designated in the wireframe. The text should be correct and have no grammatical errors, based on wireframes.

b. Style conformity – Conforming to the brand colors, styles etc. The graphical objects to be used appropriately and according to the guidelines specified in Graphical User Interface Design.

c. Adaptability- Check how it is displayed on all the supported browsers, devices and operating systems.

d. The functionality use- The button clicks, hyperlinks, navigation and other controls to match the needs.

e. Messaging- Look for info, warning and error messaging appropriately, and on what event the feedback is expected to be displayed.

f. Internationalization- Provide for extensibility to support internationalization in the application.

10. Code Linting- Integrate JSLint/ ESLint/ TSLint, CSS Lint with the IDE to ensure uniformity of code.

11. Naming conventions- Follow appropriate naming conventions for the JS/TS, CSS, HTML files and maintain uniform naming style.

12. Coding Style- 

a. Code Commenting- Add comments wherever needed.

b. No hardcoded values, use constants values.

c. Avoid multiple if/else blocks.

d. No commented out code.

e. No unnecessary comments: comments that describe the how.

f. Add necessary comments where needed. Necessary comments are comments that describe the why.

g. Keep components small.

h. Code should have no linting errors.

i. No console logs

j. Avoid inline styles.

k. CSS selectors are only as specific as they need to be, grouped logically.

l. Use Hex codes (#000) in css.

13. Make sure no dist files, editor/IDE files, etc are checked in. There should be a .gitignore for that.

14. Ensure usability of the application from the end user’s perspective, and suggest necessary UX updates.

15. Tests are readable, maintainable, trustworthy.