Web Development Advanced Learning Path - Optimizing Performance and Security
Assuming a good knowledge of the technical aspects of the web and the structure of a web application, this learning path dives deeper into the technologies and more advanced models for application design. We will investigate the concepts of Single Page Applications, Responsive interfaces, ReST API, good principles for UI design… We will also go further in security questions like authentication protocols like oAuth. In the end, it is always up to the developer to select and assemble the technologies that make most sense to him and his working environment. Naturally, some tools and frameworks may be easier to adopt and use than others, but most of the time, it is a question of developer’s taste and experience, as well as practices in place in his organization and requirements in terms of interoperability, security or performance.
Modern Web App Architectures: How to Choose the Right One for Your Project
Along the years, the technology as well as the theory behind web applications has evolved, providing new models, architectures, services, organisations… It is important to fully understand the different types of application scaffolding to choose the right architecture, the one that will adapt to your current and future needs in terms of functionality, usability, performance, security… This article reminds you of the main building blocks of a web app, before delving into more advanced architectures like microservices, serverless, single-page applications…
What is a single page application? SPA
After reviewing the various types of web application architectures, we now dive into SPA --- Single Page Applications. This video introduces you to the concept of SPA, compares it with traditional web app and explains about some of the core technologies that support such type of applications: JSON data format and JavaScript language, that allows the code running in the browser to access data and services run on the server side through the use of an API – Application Programming Interface. The latter concept will be further addressed in the next resource.
What is REST?
An API – Application Programming Interface defines a list of services that are offered by an application and can be consumed by client programs. It has to be very precisely defined in terms of functionality, input data required and output produced so that clients know exactly how to query the service and what can be expected from it. REST is an architectural style widely used in web applications to create APIs. By reading this article, you will learn about the principles behind this style and how to correctly design a neat REST API to encapsulate your services. Examples and how-tos are also provided in the reading list, like How to Design a REST API.
What are Progressive Web Apps?
After learning about the SPA model, let’s turn to another way of building modern applications for the web, but not only… PWA – Progressive Web Apps aim at bridging the gap between native apps, those directly exploiting the rich services available on specific platforms like iOS, Android, Windows…) and Web Apps, running in a web environment, more flexible and ubiquitous but less rich in terms of services.
This series of articles takes you through the steps to better understand what a PWA is, and how to build and deploy such type of modern application.
Principles of UX/UI Design - Meta course on Coursera
This online course offered by Meta addresses a very important of any application: the User Experience (UX), in particular through a carefully designed User Interface (UI). The four modules present in depth the principles for designing and building an effective, usable, high-quality user interface to provide the best experience possible. Methodologies for design evaluation are also covered, and all those elements are applied in a practical fifth module. UI and UX are key elements of an application that will help attract and retain your users; it is thus vital to give it as much care as possible. This valuable resource will help you in that direction.
What is OAuth 2.0?
As we have seen in the previous resources, a modern web application is made of a potentially large set of components, front end, backend, API services… It is important to know who your users are, to verify their identity and authenticate them before allowing access to the application. On top of that, all those components that make your application need to communicate in a secure way, ensuring that not everyone is able to freely access any service. Those two controls are called authentication and authorization, two pillars of web application security.
The oAuth2 protocol is one of the most widely used protocol in be web applications (and others); it is the protocol behind the ‘Login with your XX account’, but not only: it is present behind the scene at each invocation of service, embedding tokens to prove the user’s identity and granted privileges.
This article will introduce you to this protocol in an understandable way. A more technical view is available in this article, but you may also want to turn to the official protocol specifications to get the most detailed information about it.
Build a Progressive Web Application with Django and Angular
After reading and learning about the theory, it is now time to put our hands dirty and start building a full modern web application. For this exercise, we will focus on a Progressive Web Application, using Angular for the front-end part and Django for the backend part, made available through a REST API as described previously.
This tutorial takes you step by step to the implementation of a simple yet real application, running on your local machine so not requiring any special hardware or software.
Securing an API by using OAuth 2.0
Another step in building a real web application is to bake security in. This tutorial demonstrate the use of the oAuth2.0 protocol presented earlier to secure an API. It covers the various flows of the protocol.
If you are more familiar with JavaScript, you may want to look at this other example implementation that illustrates the various steps of the protocol with code.
If you are more into the PHP ecosystem, you will certainly be interested in this other article.
Introduction to Web3
Technologies are constantly evolving, and the Web in general is no exception. While Web 1.0 was mainly around centralized read-only information sharing, Web 2.0 gave the possibility to user to interact and provide content, feeding web sites and applications with user-generated content in a highly dynamic way. This second version of the Web is also characterized by the control of it being control by a handful of major actors and companies. Web 3 is a new vision of the web where decentralization and user control play a prominent role. There is no single definition or vision for Web 3.0, but this article introduces the core concepts underpinning the next iteration of the web, involving decentralized technologies like blockchains, smart contracts and other decentralized services.
And if you are really into this evolutionary process, it will be no surprise to you that some are already talking about Web 4.0.
How to host a website?
Developing a web application is only one part of the job. The other part is to publish the application and host it on a publicly accessible infrastructure. From running your own server in the basement of your house to renting cloud services and run your app from there, there are a wide range of possibilities, coming with various levels of required expertise, cost, performance and management options. Just Google for ‘web application hosting’ and you will see the wealth of possibilities.
This article aims at describing and comparing the different options so that you can make the best informed decision.
These two otherarticles provide additional information about the hosting options.
How to Determine the Correct Size and Type of a Web Server
To conclude this learning path, an important topic to address is related to the technical capabilities of the chosen hosting environment. How powerful should be the target infrastructure that will host your application? Too small? It will respond poorly to requests, exhibit bad performance or even crash. Too big? You will waste money in paying for power you are not using. Hence it is important to properly evaluate the current and future technical requirements to ensure smooth operation and controlled cost. It is the goal of this article to cover the different elements to take into account.