Website Coding 101: Frontend Frameworks

We’ve discussed different types of programming languages and their meanings, so this session focuses solely on frontend frameworks for creating websites. Gone are the days when basic HTML and CSS were enough to create a website that meets the technical standards of 2018. Today we need dynamic, attractive, and cross-compatible websites with smooth user interfaces and […]

We’ve discussed different types of programming languages and their meanings, so this session focuses solely on frontend frameworks for creating websites. Gone are the days when basic HTML and CSS were enough to create a website that meets the technical standards of 2018. Today we need dynamic, attractive, and cross-compatible websites with smooth user interfaces and one-click satisfactions. To quickly turn around eye-catching, interactive websites there are now numerous frontend development frameworks that can be used.

Frontend frameworks allow you to do more with less. They vastly improve the speed and efficiency of deploying code. They are toolsets for providing solutions to execute repetitive tasks by automating the overheads associated with common problems in web development.

The decision on which framework to use should not be based on their popularity but rather on which one best suits the development needs. There is a culture amongst developers to contribute to open source libraries. In fact frontend web developers can utilise frameworks to achieve amazing effects and interactivity, without the need for backend developers.

Below we’ll explore some industry standard JS frameworks used by our frontend developers:

 

logos2

JavaScript Frontend Frameworks

Bootstrap

The most popular HTML/CSS, and JavaScript frontend-only framework for developing responsive websites with “mobile-first” approach. Bootstrap was developed by Twitter as a framework to encourage consistency across internal tools, released as an open source project in 2011.

Because it is all-encompassing, the out-of-the-box file size is large and can be messy. But it is updated continually, thus Bootstrap typically includes the latest and best features. The latest version Bootstrap 4 is currently in development with the first beta version released on August 2017. Significant changes include switch from Less (dynamic stylesheet language) to Sass (scripting stylesheet language). CSS preprocessors like Less and Sass are tools that greatly enhance CSS development, and it seems the Sass community is larger and active due to faster processing ability.

 

Materialize

Responsive framework that implements Material Design, a design language developed by Google in 2014 and used across all Google Suite (Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Google+ etc etc). Materialize is loaded with ready-to-use buttons, icons, forms, shadows, typography, colours and other web-essential design elements. The huge selection of components is a big plus, but large file size makes this a bulky framework to work with.

 

Angular

An in-depth, comprehensive structural framework predominantly maintained by Google. Originally developed in 2009, the framework extends traditional HTML vocabulary to present dynamic content.

Angular is designed for data-heavy sites: changes in the backend are immediately reflected on the user interface (UI). It is perfect for Single Page Applications (SPAs), web apps that load a single HTML page and dynamically update that page as the user interacts with the app. Angular is used by Google, Forbes, Getty Images, Sony Store to name a few.

 

React

A framework that’s behind interactive UIs of Facebook, Instagram, Skype, Airbnb, Uber, Netflix, Twitter, Pinterest, and Paypal, showing its efficiency within dynamic high-traffic applications. Hence, appropriately, it is called ‘React’ because of the quick reaction to change. It is mainly maintained by Facebook and Instagram: it was first deployed on Facebook’s newsfeed in 2011 and later on Instagram in 2012.

React allows developers to create large web-applications that use data and can change over time without reloading the page. It aims primarily to provide speed, simplicity, and scalability.

There has been an ongoing licensing controversy with Facebook wanting to relicense React in the face of open-source developer backlash. Patent license terms further add to React deemed to require a higher learning curve.

 

Vue

One of the fastest, leanest and progressive frameworks rapidly increase its popularity in 2016 when version 2 was released. It was first released in 2014 by ex-Google employee, taking the best from Angular and React for quick development of cross-platform solutions. Vue can also function as a web application framework capable of powering advanced SPAs.

It is said to require relatively smaller learning curve for building user interfaces, and is well documented. Vue is used by Alibaba, Grammarly, Expedia and Nintendo.

3d-text-input

tolks

vue-twentytwenty

 

[source: madewithvuejs.com]

(Live example / demo by TJ here)

 

What Our Team Say

 

JY_Materialize

Frontend Developer

MaterializeCSS is awesome. But I prefer not to over use frameworks in general. It’s handy tool for building something nice and quick, but in most cases, we at Matter Design are creating something unique. Meaning most of the cookie-cutter styles and features of frameworks are not always a shortcut.

TJ_Vue

 

Senior Full stack Developer

I work with all frameworks but in my best opinion, I like the simplicity of VueJS. Clean code and structure – can’t find any fault.

 Dom_Bootstrap

Creative Designer

Bootstrap is open source, good for teams, good grids. However, I think the files are big! 

 NP_none

Managing Director

These libraries are great for efficient builds and workflows. But it’s important that the uniqueness of a brand comes through in the interface design and user experience.

 

 

 

Glossary of web terms

Angular Google’s frontend JavaScript framework.

API Application Programming Interface: tools for building application software.

Backend Enabler for a frontend experience like calculations, logic, database interactions,
and performance.

Bootstrap A popular HTML/CSS/JS frontend-only framework for developing responsive
websites.

C A general-purpose computer programming language that was precursor and
influencer of many other languages.

C++ A powerful, general-purpose C-based computer programming language.

CSS Cascading Style Sheets: a style sheet language used for describing the
presentation of a document written in a markup language.

CSS Own language built on top of CSS that adds scripting functionality.

Preprocessor

Framework Provides a structure to automate building and deploying web applications.

Frontend User facing experiences – what the user sees and interacts.

Full stack Both frontend and backend.

Go Also known as golang is a newer web  programming language by Google.

HTML Hypertext Markup Language: standard markup language for creating web pages
and web applications.

Java A general-purpose computer programming language.

JavaScript A programming language that is one of the three core technologies alongside
HTML and CSS for web development. Often abbreviated as JS.

jQuery A library of JavaScript on which other JS frameworks are built.

JScript Microsoft’s adaptation of JavaScript.

Less Leaner CSS: a dynamic stylesheet language / one of CSS preprocessors.

Material A design language developed by Google and used across all Google Suite
Design

Materialize A responsive framework that implements Google’s Material Design components

PHP A web scripting language behind web giants such as WordPress and Facebook.

Python A versatile computer programming language best for data processing.

React Facebook’s frontend JavaScript framework.

Ruby A versatile computer programming language for web and mobile apps.

Sass Syntactically Awesome Style Sheets: a scripting stylesheet language / one of
CSS preprocessors.

SPA Single Page Application: a web app that load a single HTML page and
dynamically update that page as the user interacts with the app.

Script A computer language with a series of commands or instructions.

SQL Structured Query Language: a standard language for database management.

Stack Layers of technologies to build a website or application.

Stylus Layers of technologies to build a website or application.

UI User Interface: design elements that allow interaction between the user and the
application or device e.g. buttons and menus.

Vue A progressive frontend JavaScript framework.