A full stack guide: the full picture of languages for web-development — Part 1

Part 1: Front-end languages

Special thanks to @yatoogamii and @unikoke94 for their reviews

When building a web application, one can feel overwhelmed by the number of languages and options to choose from. And behind each language or tech-stack lies a bigger set of tools and libraries to choose from, making the choice even harder.

Are they all equally good in all situations though ? Not quite.

One thing we learn is that no language is better than the other. Are they all equally good in all situations though ? Not quite. Each one of them will answer a specific need you have. If you know what you are building, you should know what stack is best suited for the job, or at least the choice is going to be narrowed down to a very small group of languages.

What we call “Front end” is the part of a system the user directly interacts with. On a network, the client is the machine accessing a service made available by a server. In the web-environment, the code that defines “front end” is executed on the client’s machine in a web-browser (Chrome, Firefox, Edge, Safari, Opera …). This piece of code can be sent as a static bulk of files or be dynamically rendered on the server before being sent to the client (we talk about server-side rendering).

The ecosystem of front-end languages evolved greatly lately, with incredibly powerful JavaScript libraries such as React.js, Vue.js and Angular. But it all relies on three wide-spread, too-big-to-fail languages: HTML, CSS and JavaScript.

HTML, CSS and JavaScript share an uncommon fact: each new version is backward compatible.

Change one of them and you break the internet. People won’t all have interpreters to see your app. Two of those languages are not considered programming languages: HTML and CSS. One of them is a script language: JavaScript, for which each web browser has it’s own interpreter (V8, SpiderMonkey). They all share an uncommon fact: each new version is backward compatible. The reason behind it is simple. If they were not, once again the internet would break. After an update, you wouldn’t be able to render ‘old’ websites in your browser.

The core of front-end languages

HTML

HTML is the standard markup language to describe content of web-pages.

• Key concepts: Each element of the page lies in a block. Each block is surrounded by tags. A page can be seen as a tree of nested elements improperly referred to as the DOM. You will find single tags as well as double tags elements. Elements can be inline or blocks (they will be rendered full-width and will break line).
• Versions: The first release was done in 1993. Current version is HTML 5.
• Specifications: WHATWG (Apple, Mozilla, Google, and Microsoft) edict specifications each web-browser will implement to render html pages.

CSS

CSS is a style sheet language. It is used to manipulate the appearance and arrangement of elements in web pages.

• Key concepts:
• You target elements from your page with CSS selectors.
• Flexbox and CSS-grid gives you an incredibly good control on the arrangement of your page.
• Media queries will help you to make your page responsive.
• Versions: The first release was done in 1996. Current version is CSS 3.
• Specifications: W3C edicts specifications each web-browser will implement. All features are not implemented the exact same way by browsers, nor are released at the same rate.
• Ecosystem:
• The BEM notation is a formal naming convention to write easy-to-understand classes’ names on medium-to-big projects.
• CSS pre-processors (like SASS or Less) are powerful tools to help you write better CSS (with reusable code, nesting for specific patterns, and easier to maintain). The code you write in SASS or Less ‘compile’ to CSS.
• CSS Frameworks (Bootstrap, Fundation) provides default styles, that are easy to set-up, responsive and ready-to-go. I wouldn’t recommend a beginner to use them, get your hands dirty.

JavaScript (client’s side)

JavaScript’s first purpose was to make boring static pages dynamic. You described your page with HTML, you added style with CSS, now you can basically make it come to life with JavaScript. You can add events, make animations, modify the page without sending requests to the server for a new page. All major web browsers come with an engine that executes JavaScript. V8 for Chrome and Edge, SpiderMonkey for Firefox.

JavaScript evolved greatly last years and became a major server-side language. I will not discuss it’s advantages here because you basically have no alternative for the front…

We will dig deeper in the language in part 2 with other server-side languages.

• Description: JavaScript is an object-oriented, prototype-based, multi-paradigm, interpreted, dynamic language. It is single-threaded and synchronous by design.
• Key concepts (of JavaScript in webrowsers):
• Each browser has it’s own implementation of JavaScript.
• Most JavaScript runtime execute code using ‘just in time’ compiling.
• The DOM is an API. It allows scripts to access the tree of elements within the page to change its structure, style, and content. The object ‘window.document’ allows you to access the dom.
• Versions: The first version was released in 1996. The last version is ES2021.
• Specifications: Each year, ECMA releases new specifications for a scripting language called ECMA script. They describe the behavior of the language. Those behaviors are then implemented in each engine (V8, SpiderMonkey).
• Ecosystem:
• Package managers (or project managers) allow you to download and manage dependencies of your projects. NPM is the Package Manager of Node, maintained by Microsoft. YARN is a serious alternative maintained by Facebook.
• Babel is a transpiler. It allows you to code in modern JS and convert your scripts to older-specifications-compliant code. As a result, it will make your code work on older browsers.
• jQuery is a very famous library. It’s purpose is to make JavaScript, DOM-access and requests easier.
• The biggest thing that happened to the front ecosystem last years are three frameworks that help you to abstract your pages in an incredibly effective way. I will describe each of them bellow.
• I kept the best for the end: TypeScript is a super-set of JavaScript developed and maintained by Microsoft. It adds stability, type safety and robustness to your application and quite surprisingly it is Turing-complete ! It makes JavaScript so much better I don’t think anyone who used it in production will ever go back, even on small projects.

NB: TypeScript will be discussed more in part 2 with back-end languages.

The big frameworks

When it comes to build complex, large-scale web-applications, three frameworks make an app incredibly easy to build and to maintain.

Bias alert: I have been using React in production for the last 2 years.

React.js

React.js is a library for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time.

• Key concepts:
• In React, you write components. They can either be stateful or stateless.
• Each component has a life-cycle.
• React uses a virtual DOM to avoid frequent DOM manipulation.
• Single-way data-flow.
• React 16.8 introduced hooks. They allow you to use state and other feature in functions (avoiding the use of classes).
• JSX is syntaxic sugar to describe components (React.createElement) using an XML-like syntax.
• Versions: The first version was released in 2013 by Facebook. The last version in date is React17.
• Ecosystem:
• Create-React-App allows you to start a project easily, but you can use bundler tools like webPack.
• State management libraries like Redux and Recoil allow you to store a global state (to avoid passing props to every child component). The hook useContext made them useless on small to medium projects.
• React-router-dom allows you to enable client-side routing
• Next.js allows you to make server-side rendering
• Facebook released number of chrome-addons for debugging.
• React native allows you to build mobile apps.
• Why choose React:
• Incredibly easy to learn
• Easy to find developers
• Huge ecosystem
• Performance
• React native
• If you’re app is complex or need to be expanded
• It is maintained by Facebook.
• Platforms using react: Facebook, Instagram, Netflix, Discord, Airbnb, Dropbox, Monday …

Vue.js

Vue.js is a model-view-viewmodel JavaScript framework for building user interfaces and single page applications.

• Key concepts:
• Vue templates are single-page components with distinct blocks for HTML templates, styles, and JavaScript.
• Vue uses a virtual DOM to avoid frequent DOM manipulation.
• Versions: First release in 2014. Current version is Vue 3. It is maintained by its creator Evan You and a community of developpers.
• Ecosystem:
• VueCLI helps you to start a new vue project
• WebPack helps you to make a bundle of your application
• Vuex allows you to to have a global store.
• vue-router allows you to use client-side routing
• NuxtJS provides cutting-edge features like server-side rendering, code-splitting …
• Why choose Vue:
• Growing community
• Performance
• Great documentation
• If you want to migrate progressively, page by page
• You want to use HTML templates
• Platforms using vue: Nintendo, Gitlab, Laravel, Font-awesome, 9Gag, Aircall …

Angular 2

Angular is a JavaScript framework built on typescript for building large-scale web applications.

• Key differences with React and Vue:
• It operates on the real DOM.
• It uses two ways data binding.
• Versions: Angular was launched in 2009, and Angular 2 was launched in 2016. It is developed and maintained by Google.
• Why choose Angular 2:
• You need to build a large, complex app and need the Google reliability
• You work with well educated front-end engineers
• It is built on typescript
• Two-ways binding is more flexible
• It comes with it’s own ecosystem
• You’re a Google fan boy / girl
• Platforms using Angular: Google platforms (gmail, google books, firebase …), Microsoft office, GitHub, PayPal …

That’s it about front end languages. Did I miss something ? Leave-it in the comments !

Subscribe for coming part 2: back-end languages.

Links:

• HTML validator by W3C: https://validator.w3.org/
• A flexbox guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• A css-grid guide: https://css-tricks.com/snippets/css/complete-guide-grid/
• A CSS-reset style-sheet: https://github.com/necolas/normalize.css/
• List of ressources for React: https://github.com/enaqx/awesome-react
• YARN: https://yarnpkg.com/
• NPM (with Node): https://nodejs.org/en/