This article takes a look at how our approach to the front-end development of web applications has changed with the advent of modern methods like JavaScript frameworks.

Websites
In the early days websites were static, which meant that there was no ability for content to be dynamic, the site was created and not updated. This approach resulted in less engaging and interactive user experiences.  We then moved to developing sites with Content Management Systems (CMSs) which enable non-technical people to update text and images via a simple back-end user interface. This approach also enabled developers to introduce more interactive elements such as animations and transitions.

More recently, developers have adopted Headless CMSs which are Content Management Systems that separate the content from the means of presentation. This flexible approach means that the same content can be consumed by various integrated interfaces which makes it a really efficient solution for those managing an omni-channel presence. This approach enables developers to create custom front-ends to display CMS content on any device or platform.

Web Applications
Traditional web applications load new content on each page request. This approach makes them slower and less responsive than modern front-end applications. Modern methods include the use of single-page applications (SPAs) which load all of their content in a single HTML page. This makes them a faster and more responsive alternative to traditional web applications.

Custom Development
Building a web application from scratch used to require entirely custom development which could be a time-consuming and expensive process. Now there are a number of frameworks and libraries available with features and functionality that can save developers time and effort. Building on these frameworks and libraries also enables greater scalability than was available previously. 

Revolution
Modern JavaScript frameworks have revolutionised web development by providing efficient and powerful tools for building dynamic and interactive user interfaces. Among the most popular frameworks are React and Vue, which have gained widespread adoption and have become the “usual suspects” in the world of front-end development.

React
React is a JavaScript library developed by Meta (formerly Facebook). It follows a component-based architecture, where the user interface (UI) is broken down into reusable and self-contained components. Each component manages its own state and can be combined with other components to build complex UIs. 

React uses a virtual DOM (Document Object Model) to efficiently update and render the UI by minimising the number of actual manipulations on the real DOM. This approach results in faster performance and a more seamless user experience. React also allows developers to write components using JSX, a syntax extension that blends JavaScript and HTML, making it easier to describe UI elements and their behaviour.

Vue
Vue was created originally by former Google engineer, Evan You. Vue is a progressive framework for building user interfaces. It takes a similar component-based approach but offers a more gradual learning curve, making it a popular choice for both beginners and experienced developers. 

Vue allows developers to create reusable components and provides a flexible and intuitive API for manipulating the UI. It also incorporates a virtual DOM and employs a reactive data binding system, which means that changes to the underlying data automatically update the UI. Vue’s template syntax closely resembles HTML, making it easy to understand and work with.

React and Vue
Both React and Vue follow the concept of a unidirectional data flow, where data flows in a single direction from a parent component to its child components. This ensures predictable and manageable state management, as changes to the data trigger updates throughout the component tree. To handle user interactions and manage application state, both frameworks support the use of external libraries, such as Redux for React and Vuex for Vue.

Additionally, React and Vue have extensive ecosystems with a wide range of libraries and tools that complement their core functionalities. These ecosystems offer solutions for routing, state management, form handling, and more, making it easier to build complex applications. 

How do we use them?
At Pretty Technical, we mainly use React to build user interfaces for our clients’ and in-house products. Its declarative nature makes it easy to build complex user interfaces that are both dynamic and responsive, ensuring good performance and scalability. We also use Next JS which is a React framework that includes SEO, routing, internationalisation and static site generation capabilities out of the box, improving delivery times.

There are occasions where we’ll use React alone for smaller applications where the first load can handle loading the whole application without taking too long.  Mostly we use React with Next JS in ongoing development and client implementations to enable us to maintain fast loading times for big applications. Where possible we also exploit its static site generation capabilities to delegate the fetching of the data and building of the UI to the server. Next JS also improves SEO which is a must have for these applications to rank higher in search engine results pages (SERPs).

If you’d like to discuss development approaches further we’d love to hear from you, please just email us at [email protected].