DEV Community: Angéllica Araujo

Sharing Modules Across Different Applications: Dynamic Module Federation with Nx Workspace

Angéllica Araujo — Sun, 23 Apr 2023 11:20:10 +0000

Module federation allows developers to share modules between different applications, enabling them to build more modular and scalable systems allowing different applications to share modules dynamically at runtime.

Dynamic module federation takes module sharing to the next level by enabling applications to load and unload modules dynamically.

The benefits of this approach include reduced code duplication and faster development cycles, making it an attractive option for developers to consider in their projects.

Practical example using the Nx workspace

Nx.dev delivers a practical example of how to implement dynamic module federation in an Angular application using the Nx workspace.

The tutorial on provides a step-by-step guide which the key steps are:

Create an Nx workspace and an Angular application within it using the Nx CLI.
Modify the webpack.config.js file to enable module federation and define the shared modules.
Define a remoteEntry.js file in the remote application to expose the shared modules.
Use the loadRemoteModule function in the host application to dynamically load the remote module.
Set up routing in the host application to load the remote module on demand.
Test the implementation by running the applications and verifying that the module is loaded correctly.

The first step involves creating an Nx workspace and an Angular application within it using the Nx CLI and installing the necessary dependencies.

In the second step, you need to modify the webpack.config.js and define the shared modules. Then, you configure module federation in the webpack.config.js file by adding the ModuleFederationPlugin to the plugins array and define the shared modules by adding them to the shared object.

In the third step, you work on a file to expose the shared modules. This involves creating a remoteEntry.js file in the remote application's src directory and exporting the shared modules using the __webpack_share_scopes__ object.

In step four, developers use the loadRemoteModule function in the host application to dynamically load the remote module. They import the loadRemoteModule function from @angular-architects/module-federation in the host application and use the loadRemoteModule function to dynamically load the remote module when needed.

In step five, you set up routing to load the remote module on demand. It's done by defining a route for the remote module in the host application's app-routing.module.ts file and use the loadRemoteModule function to load the remote module in the route's component.

Finally, in step six, you can test the implementation by running the applications and verifying that the module is loaded correctly.

By following these steps, you can implement dynamic module federation in your Angular applications, allowing for the dynamic loading and unloading of modules at runtime.

Image by https://www.vecteezy.com

Tipos condicionais no TypeScript: exemplos práticos e uso avançado

Angéllica Araujo — Tue, 18 Apr 2023 07:57:18 +0000

Com os tipos condicionais, um recurso poderoso do TypeScript, é possível criar tipos que dependem de outros tipos. Os tipos condicionais são avaliados em tempo de compilação e são definidos usando um operador ternário que especifica uma condição, e o ponto de interrogação indica que o tipo é condicional.

A sintaxe para um tipo condicional é a seguinte:

T extends U ? X : Y

Aqui, T e U são tipos, X e Y são tipos ou expressões de tipo, e extends é uma palavra-chave que especifica uma restrição em T.

Um caso de uso comum para tipos condicionais é extrair propriedades de objetos. Por exemplo, considere a seguinte interface:

interface User {
  id: number;
  name: string;
  email: string;
}

Podemos criar um tipo que extrai as chaves de User da seguinte forma:

type UserKeys = keyof User; // "id" | "name" | "email"

Usando um tipo condicional, podemos criar uma versão mais flexível de UserKeys que pode extrair chaves de qualquer tipo de objeto:

type KeysOfType<T, U> = {
  [K in keyof T]: T[K] extends U ? K : never;
}[keyof T];

Aqui, KeysOfType recebe dois parâmetros de tipo, T e U, e retorna uma união de chaves de T cujos valores são do tipo U. Por exemplo:

interface Car {
  make: string;
  model: string;
  year: number;
}

type StringKeys = KeysOfType<Car, string>; // "make" | "model"

Esse tipo retorna "make" e "model", pois essas são as chaves de Car cujos valores são do tipo string.

Outro caso de uso para tipos condicionais é verificar se um tipo é um array. O TypeScript fornece um tipo Array integrado, mas às vezes precisamos verificar se um valor é um array em tempo de execução. Podemos criar um tipo que verifica se um tipo é um array da seguinte forma:

type IsArray<T> = T extends any[] ? true : false;

Aqui, IsArray recebe um parâmetro de tipo T e retorna um booleano indicando se T é um tipo de array. Por exemplo:

type A = IsArray<number[]>; // true
type B = IsArray<string>; // false

Os tipos condicionais também suportam a palavra-chave infer, que nos permite inferir um tipo de outro tipo. Por exemplo, considere o seguinte tipo:

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

Aqui, ReturnType recebe um tipo de função T e retorna o tipo de retorno de T. Por exemplo:

function add(a: number, b: number): number {
  return a + b;
}

type Result = ReturnType<typeof add>; // number

Este tipo retorna number, pois esse é o tipo de retorno da função add.

Além disso, a página aborda como combinar tipos condicionais com outros recursos do TypeScript, como tipos genéricos e uniões de tipos. Por exemplo, podemos criar um tipo que verifica se um tipo é uma união de tipos de objeto da seguinte forma:

type IsObjectUnion<T> = T extends object ? T[keyof T] : never;

type ExampleUnion = { a: string } | { b: number };

type Result = IsObjectUnion<ExampleUnion>; // string | number

Este tipo retorna string | number, pois ExampleUnion é uma união de tipos de objeto que contém a: string e b: number.

Conclusão

Os tipos condicionais são uma ferramenta poderosa do TypeScript para tipos mais flexíveis e precisos. Com os tipos condicionais, é possível extrair propriedades de objetos, verificar se um tipo é um array e inferir tipos de outros tipos, além de combinar tipos condicionais com outros recursos do TypeScript para criar tipos mais complexos e úteis.

Referências

Documentação oficial: https://www.typescriptlang.org/
Créditos da imagem: https://brandontle.com/writing/why-typescript/
Introdução prática: https://auth0.com/blog/working-with-typeScript-a-practical-introduction/

Angular: Como o framework evoluiu para atender às demandas do desenvolvimento web

Angéllica Araujo — Sun, 16 Apr 2023 14:02:27 +0000

Evolução, desempenho e funcionalidades para conquistar o futuro

Desde sua primeira versão em 2010, o Angular da Google conquistou muitos corações de desenvolvedores web. Mas, como em toda evolução tecnológica, a transição do AngularJS para o Angular 2 não foi fácil e houve controvérsias. No entanto, a reescrita completa do framework e as introduções de novos conceitos, como componentes, módulos e serviços, provaram-se necessárias para atender às novas demandas do ecossistema da web.

Com o lançamento do Angular 15 em abril de 2023, o framework continua evoluindo e trazendo melhorias significativas de desempenho, tornando mais fácil a escrita de aplicativos com código mais eficiente. Algumas das novas funcionalidades e melhorias incluem compilação mais rápida, melhor "tree shaking", injeção de dependência simplificada, tratamento de erros aprimorado, novos comandos CLI e suporte a internacionalização.

Naturalmente, tais transições foram difíceis e trouxeram impactos, causando controvérsia entre os desenvolvedores. Para aqueles que viveram essa transição certamente se lembram que nem todos os colegas desenvolvedores foram convencidos pelas mudanças.

Funcionalidades e melhorias no Angular

O Angular 9 introduziu o mecanismo de renderização Ivy, entregando melhorias significativas de desempenho e tornando mais fácil a escrita de aplicativos, com código menor e mais eficiente.

É possível afirmar que o Angular é amplamente utilizado e continua sendo uma escolha popular para o desenvolvimento web. O framework continuou a evoluir e melhorar com a versão mais recente, Angular 15, lançado em abril de 2023.

As novas funcionalidades e melhorias no Angular (v15) incluem:

Desempenho: O Angular 15 inclui várias melhorias de desempenho, como compilação mais rápida e melhor "tree shaking".
Injeção de dependência simplificada: O novo decorador @Injectable permite uma injeção de dependência mais simples e eficiente.
Melhoria no tratamento de erros: O Angular 15 inclui um tratamento de erros aprimorado, com mensagens de erro mais detalhadas.
Novos comandos CLI: O CLI do Angular inclui vários novos comandos para um desenvolvimento mais fácil e eficiente, como ng run e ng lint.
Suporte para internacionalização: O Angular 15 inclui várias melhorias no suporte à internacionalização, como melhor localização de datas e horários.
Dependências atualizadas: O Angular 15 inclui atualizações em várias dependências principais, incluindo RxJS e a biblioteca de interface do usuário Angular Material.

Olhando para o futuro

o Angular continuará evoluindo e caminha para ser uma escolha cada vez mais popular para o desenvolvimento web. O Google está comprometido em apoiar o framework e também há uma forte comunidade de desenvolvedores que contribuem ativamente para o seu desenvolvimento e manutenção.

O Futuro do Gerenciamento de Dependências com Import Maps

Angéllica Araujo — Mon, 10 Apr 2023 07:43:24 +0000

Um Olhar sobre os Import Maps e seu potencial

Import maps está oficialmente disponível como recurso geral para sistemas que usam JavaScript. Import maps são uma maneira de controlar como dependências são carregadas, mapeando URLs para módulos JavaScript.

Import maps podem simplificar o gerenciamento de dependências, reduzindo a necessidade de configuração manual, o que pode garantir um comportamento consistente em diferentes ambientes.

Uma desvantagem do import maps é o risco de "dependency hell", onde a complexidade das configurações de mapeamento se torna muito grande e difícil de gerenciar tornando o recurso pouco eficaz.

E como usar import maps na prática? Vamos verificar a sintaxe para definir esses mapeamentos e como eles podem ser usados em diferentes contextos.

{
  "imports": {
    "lodash": "/node_modules/lodash-es/lodash.js",
    "lodash/": "/node_modules/lodash-es/",
    "lodash/forEach": "/node_modules/lodash-es/forEach.js"
  }
}

O exemplo anterior define especificadores globalmente, usando a chave imports no mapa de importação. A chave scopes pode ser usada para fornecer mapeamentos em um escopo. Que se aplicam somente quando o módulo corresponde a um prefixo específico de URL.

{
  "scopes": {
    "/a/" : {
      "moment": "/node_modules/moment/src/moment.js"
    },
    "/b/" : {
      "moment": "https://cdn.example.com/moment/src/moment.js"
    }
  }
}

Direções futuras possíveis para import maps

Alguns autores sugerem que o futuro para os import maps envolve uma integração mais próxima com gerenciadores de pacotes e ferramentas de build.

Integração com gerenciadores de pacotes

Import maps poderiam ser integrados com gerenciadores de pacotes como o npm, permitindo as dependências sejam gerenciadas com uma única ferramenta em vez de ter que usar ambos import maps quanto um gerenciador de pacotes.

Isso também poderia permitir um controle mais sofisticado sobre as dependências, como especificar diferentes versões de uma biblioteca para diferentes partes de uma aplicação.

Integração com ferramentas de build

Import maps também poderiam ser integrados com ferramentas como o Webpack e o Rollup, permitindo que os desenvolvedores especifiquem dependências diretamente nos arquivos de configuração de build, reduzindo a necessidade de configuração manual.

Suporte para importações dinâmicas

Atualmente, os import maps suportam apenas importações estáticas, o que significa que as dependências são carregadas no momento em que a aplicação é iniciada. No futuro, os mapas de importação podem ser aprimorados para suportar importações dinâmicas. Permitindo que as dependências fossem carregadas sob demanda, conforme necessário.

Referências

Imagem de capa tirada de "Dependencies Management" em https://hygger.io/guides/agile/project-management/poject-dependencies/

The official Import Maps specification from the W3C - https://wicg.github.io/import-maps/

How to Publish Web Components to NPM - https://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/

A especificação oficial dos mapas de importação da W3C: https://github.com/WICG/import-maps

Building and delivering frontends at scale - https://frontendmastery.com/posts/building-and-serving-frontends-at-scale/

Desenvolvimento de aplicativos web com frameworks JavaScript e os princípios do PESPA

Angéllica Araujo — Tue, 04 Apr 2023 07:26:33 +0000

Neste artigo, falamos brevemente sobre os princípios PESPA : Progressive Enhancement, Semantic HTML, Performance, Accessibility; e como aplicá-los ao desenvolvimento de aplicativos web com frameworks JavaScript modernos. Descubra como alcançar aprimoramento progressivo, melhorar a acessibilidade e desempenho do seu aplicativo e garantir a usabilidade para todos os usuários.

PESPA (Progressively Enhanced Single Page Apps)

PESPA é consolidado com base nos princípios: Aprimoramento Progressivo, HTML Semântico, Desempenho e Acessibilidade. Esses são quatro princípios fundamentais que devem ser considerados ao desenvolver aplicativos web com frameworks JavaScript.

Aprimoramento Progressivo garante que seu aplicativo seja acessível e utilizável por todos os usuários, independentemente das capacidades de seus dispositivos ou navegadores.

Frameworks web JavaScript modernos, como Vue.js, React, Svelte e Angular, oferecem recursos integrados para ajudar a alcançar o aprimoramento progressivo, incluindo renderização no lado do servidor e otimização de tamanho.

O segundo princípio, HTML Semântico, implica em usar a semântica para melhorar a acessibilidade e a usabilidade do seu aplicativo. Isso significa usar as tags HTML corretas para o conteúdo, incluindo cabeçalhos e listas, para tornar o conteúdo mais fácil de ler e entender para usuários com deficiência visual ou cognitiva.

Já o terceiro princípio, Desempenho, significa otimizar seu aplicativo de modo que ele seja rápido e responsivo. Isso pode incluir otimização de tamanho de arquivo, minificação de código e uso de recursos como lazy loading e cache de recursos para acelerar o carregamento do aplicativo.

Acessibilidade é o quarto princípio, e significa garantir que seu aplicativo seja acessível a todos os usuários, independentemente de suas habilidades ou deficiências. Isso pode incluir fornecer conteúdo alternativo ou recursos de acessibilidade, como texto alternativo para imagens, para usuários com deficiência visual ou auditiva.

Frameworks e bibliotecas

Os frameworks emergentes, incluindo React, Vue.js, Svelte e Angular, possuem características e benefícios que podem nos ajudar a construir aplicativos web modernos e eficientes.
Esses novos frameworks ganham popularidade devido ao seu desempenho, simplicidade e facilidade de uso.

Progressive enhancement (aprimoramento progressivo) é uma consideração importante ao construir aplicativos web com frameworks web JavaScript. A abordagem envolve começar com um conjunto básico de recursos que funcionam em qualquer ambiente e, em seguida, adicionar recursos e aprimoramentos adicionais para usuários com dispositivos ou navegadores mais avançados.

Aprimoramento progressivo garante que seus aplicativos sejam acessíveis e utilizáveis, independentemente das capacidades de seus dispositivos ou navegadores dos usuários.

Vue.js e React fornecem suporte integrado para o aprimoramento progressivo por meio da renderização no lado do servidor ou da capacidade de renderizar componentes no cliente ou servidor.

Outros frameworks, como o Svelte, enfatizam o desempenho e o minimalismo, o que pode ajudar a garantir que o aplicativo execute sem problemas, mesmo em dispositivos mais antigos com suporte limitado ao JavaScript.

Continue estudando o assunto

"Progressive Enhancement vs. Single-Page Applications" by Bramus Van Damme: https://www.smashingmagazine.com/2020/09/progressive-enhancement-single-page-applications/
"Optimizing Performance in JavaScript Applications" by Ahmad Shadeed: https://www.smashingmagazine.com/2020/06/optimization-performance-javascript-applications/
"Web Content Accessibility Guidelines (WCAG) 2.1" by the World Wide Web Consortium (W3C): https://www.w3.org/TR/WCAG21/
"Top 5 JavaScript Frameworks to Learn in 2020" by Dusan Djukic: https://hackernoon.com/top-5-javascript-frameworks-to-learn-in-2020-96m3wvrv

Hydration: what type of experience you are building

Angéllica Araujo — Sat, 21 May 2022 22:53:31 +0000

Hydration is a term used in computer programming when generally talking through the process of filling an object with data.

An object is partially hydrated when only some of the fields are loaded into it. One may want not to load data that is not going to be used to avoid wasting bandwidth, security pitfalls, CPU cycles loading, transferring, and setting routines. [3]

When it comes to web development it usually means to fasten a loaded markup with functionality, using client-side JavaScript to add application state and interactivity to server-rendered HTML.

Hydration (or rehydration) is a technique in which client-side JavaScript converts a static HTML web page, delivered either through static hosting or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements. [2]

Rehydration: “booting up” JavaScript views on the client such that they reuse the server-rendered HTML’s DOM tree and data. [1]

Differences between rendering approaches on the web has implication in performance metrics. One must consider the trade-offs through the lens of experience.

Server rendering is a way to avoid additional round-trips for data fetching and templating on the client. The full HTML for a page is generated on the server in response to navigation. Server rendering produces: [1]

Fast First Paint (FP)
Fast First Contentful Paint (FCP)
Fast Time to Interactive (TTI)

This is possible because you’re just sending text and links to the user’s browser and so, it works well for a large spectrum of device and network conditions.

It sounds interesting, right? A faster TTI means a fully interactive page available to users asap. However, as with a lot of other things in development, we must consider the trade-off.

The primary drawback to this approach: generating pages on the server takes time, which can often result in a slower Time to First Byte (TTFB). [1]

Client-side rendering relies on the browser to fully render pages using JavaScript. All logic, data fetching, templating, and routing are handled on the client rather than the server. [1]

In terminology definitions presented in [1] Server-Side Rendering, Client-Side Rendering, and Rehydration are defined in separated bullets under the Rendering context. Still, they are bounded when it comes to application.

It means that server rendering and client-side rendering can be combined through rehydration in something called Universal Rendering or simply SSR. [1]

One may consider performance drawbacks as the negative impact on Time To Interactive delaying interactivity due to JS due to no response to input until the client-side JS is executed and event handlers have been attached.

Hydratation is related to the user experience through performance metrics. Not only a technique but also a strategy designed to deliver the expected interactivity experience to the user.

An infographic is available in [1] showing the server-client spectrum:

Conclusion
In 2019, developers were encouraged by Jason Miller and Addy Osmani, to consider server rendering or static rendering over a full rehydration approach. One reason comes down to User Experience due to how extremely easy is to end up leaving users confused between pretense and reality.

Experiences with little or no interactivity, server rendering can represent a more scalable solution to these issues. Experiences built with CSR that rely on large JavaScript bundles should consider aggressive code-splitting, and be sure to lazy-load JavaScript - "serve only what you need, when you need it". [1]

The "Hydration" term was removed from Angular docs in 2017.

References

[1] Rendering on the Web (Jason Miller, Addy Osmani) in web.dev - 2019
[2] Hydration in web development - Wikipedia
[3] What does it mean to hydrate an object?
[*] Cover image taken from https://www.ironin.it/

Media Queries Level 5: the ability to respond to user needs

Angéllica Araujo — Sat, 02 Apr 2022 21:32:20 +0000

Recently, web.dev Blog published a web article (by Una Kravets) presenting an in-depth view of the component-driven world aims in a new responsive era [1]. In what follows I will try to summarise it from my perspective, understanding how it is becoming easier to cover the end-user preferences, all of it with the new responsive approach.

So, Web Components meaning relies on custom, reusable and encapsulated HTML tags. They can be used with any library or framework that works with HTML across modern browsers since they are built on solid standards.

Someone once told me that "when something takes an hour or more to be explained, it certainly cannot be sold easily". Well, it is becoming easier to find short good quality material about Web Components when searching for it. Take as example a video that length is half-hour explaining some specific concept in a hard scenario.

It is important to you to know that those standards and APIs are made of big effort of engineers, responsible for prototyping, speccing, and starting the implementation for the next era of responsive design [1][4]. So, a good tutorial that may takes you half-hour to get completed certainly pays off.

On going changes and updates includes user-preference based media features, container queries, and media queries for new screen types, such as foldable screens [1]. Let's have a little of each topic and the main concepts involved while we understand how important it can be.

The ability to respond to user needs

If you're not familiar with the concept of accessibility and user preferences then I recommend that you read the Stories of Web Users em Accessibility Fundamentals da W3 [2] as a more reliable way of introduction content.

Well, when we talk about accessibility, we are talking about a set of preferences inherent by a group of users that need to be addressed. So, if they meet adherence to their needs then the content or service provided can successfully meet this audience.

To get a little more familiar with who these users are and their needs, you can gather information at the CDC. I've chosen the following topic: "attention deficit hyperactivity disorder" (ADHD) which represents one of User Stories by W3. You can try doing the same with other topics.

So, according to the CDC, at least a total of 3.3 million children aged 12–17 years were diagnosed with ADHD in the US in 2016 [3]. In addition to ADHD, according to the CDC, the diagnosis of ADHD can be followed by other disorders such as anxiety.: about 3 in 10 children with ADHD had anxiety [3].

Now, we can start talking about Preety's User Story as an example, which is somewhat well-aligned with the CDC data on ADHD. Preety is a young person diagnosed with ADHD [2]. Preety's experience varies greatly depending on how well the content or service adheres to accessibility.

(...) Preety’s experience with websites varies greatly from one site to another. Some sites use graphics and illustrations in a way that helps her to focus on the sections and content that she would like to read, while other sites have a lot of advertisements and moving content that is very distracting. - User Stories: Preety - WAI by W3 [3]

If Preety was 17 years old in 2016, being a subject of the CDC research group and positively diagnosed, she would be an adult today (2022). During her school life, technologies were introduced and she somehow managed to overcome the difficulties with the help of appropriate tools.

However, some of these preferences are set at the operating system level and are far from capture capability for some web APIs. In fact, some others preferences had the usage extended to users who do not see themselves in any of the User Stories at all. Do you need more examples? Preferences for light, dark, or auto themes.

Whether to ensure that Preety's future could share of the same excellence as possible as her colleagues does, to save a device's battery or simply adapt the system just for the visual preferences, User Preferences are extremely relevant and are increasingly included in the new responsive era evolution loop.

Media Features

It is common that a developer, frontend engineers in a special case, faces different behaviors implementation requests for elements given an interface depending on the user agent, display device or even the document being rendered.

This is usually done through Media Queries. Developers make usage of Media Queries as a method to access information about aspects related to the user agent that the document is being displayed [4].

The method follows an interpretation path as shown in Figure 1 [5]. The syntax allows us to build modifiers according to the media type and other features, once the media condition is met then the user will be able to experience features developed exclusively for the scenario.

User-preference based media features

Well, now we can start talking about the advances regarding the adoption of certain user preferences that in many ways are available at the operational system level. Consider an option for macOs [6]

Stop or reduce the movement of some elements on the screen—for example, when you open apps, switch between desktops, or open and close Notification Center. This feature is especially useful for people who experience motion sickness or vertigo. - Reduce screen motion on Mac, by macOS User Guide

The example above is a reference to the prefers-reduced-motion option covered in the Media Queries Level 5 specification. The latest specification introduces so-called user preference media features, that is, a way for sites to detect the user's preferred way to display content [4].

Therefore, considering the prefers-reduced-motion preference in page design creates an inclusive environment for people like Preety, allowing your application to be instrumentalized at the level of preferences that come directly from the operational system [7].

Additionally, in their operating system, whether it's on desktop or mobile, users can set a preference for light, dark, or auto themes [8]. According to the new specification you can use prefers-color-scheme to customize your UI to it

See specification for more options[4]:

Detecting the desire for less motion on the page: the prefers-reduced-motion feature
Detecting the desire for reduced transparency on the page: the prefers-reduced-transparency feature
Detecting the desire for increased or decreased color contrast from elements on the page: the prefers-contrast feature
Detecting Forced Colors Mode: the forced-colors feature
Detecting the desire for light or dark color schemes: the prefers-color-scheme feature
Detecting the desire for reduced data usage when loading a page: the prefers-reduced-data feature - Media Queries Level 5, W3C

Conclusion

Think of it as a further move into the new responsive era.
The Component-driven approach from the developer's point of view is becoming the better way you project, build, and deploy a scalable Web application regarding new accessibility preferences.

Additional reading and tutorials

Building Components, Web Fundamentals by developers.google
web.dev prefers-color-scheme: Hello darkness, my old friend by Thomas Steiner
What is Media Query, CSSWG (Draft) - W3C - Click here to learn more
A Complete Guide to CSS Media Queries - CSS Tricks

References

[1] web.dev Blog published a web article (by Una Kravets)
[2] Accessibility Fundamentals - Stories of Web Users by W3
[3] Attention-Deficit / Hyperactivity Disorder (ADHD) - Data and Statistics About ADHD by CDC
[4] Media Queries Level 5 - CSSWG - W3C - Editor’s Draft, 10 February 2022
[5] Figure 1: Taken from CSSWG - W3 Website - Click here for more
[6] Reduce screen motion on Mac - Apple Support
[7] prefers-reduced-motion mdn web docs, Mozilla
[8] web.dev prefers-color-scheme: Hello darkness, my old friend by Thomas Steiner

Cover image was taken from Cavaon - User Experience (UX) – The Importance of Understanding Users’ Needs

The reason why a new responsive web is emerging

Angéllica Araujo — Wed, 16 Mar 2022 08:58:51 +0000

User interfaces are built on the latest in web technology and with this in mind, new APIs emerge with the promise of increasing the ability to solve old problems, including coverage for new user preferences, and all of this streamlining the work of who works with the frontend.

The actual scenario for Responsive Design

To better understand nothing fairer than understanding how things are currently done (from the developer's perspective). Well, it's 2022 and an ordinary Google search on "how to do responsive design" [ 3 ] has as main topics [ 1 ]:

Add responsive meta tags to your HTML document. Apply media queries to your layout. Make images and videos responsive, and finally, ensure your typography is easily readable on mobile devices.

Now, in Mozilla itself [ 2 ], which even you can consider as an extremely reliable source to delve into this and other subjects, we have that the term Responsive Design (Ethan Marcotte in 2010) describes the use of three combined techniques:

Fluid Grids (see Gillenwater for the original reference) — can be read in Fluid Grids (published 2009, A List Apart).

Fluid Images —allows an image to be scaled down to fit a flexible size column, preventing it from becoming distorted or pixelated if the column becomes wider than the image.

The media query (see Cameron Adams for more information) — allows different types of layouts to be available using only CSS

But we want an even more refined search for content published or edited in less than a year. So, you can find an article from web.dev (Google Developers, Una Kravets)[ 3 ] that gives a little introduction to what it means to use the term responsive design and gives us a careful look at how things are today.

Today, when using the term: “responsive design”, you are probably thinking of using media queries to change the layout when resizing a design from mobile size to tablet size to desktop size. But soon, this responsive design perception can be considered as outdated as using tables for page layout.

Building a new design perception

Well, so the responsive web is about the combined use of technologies that make modern use of CSS and HTML, creating elegant elements and useful designs for our end-user, regardless of the device being used.

But if the technology is stabilized and is considered modern, what are the novelties about? Well, the classic answer might come from the eternal cycle that exists to minimize the effort that technologies demand so that your skills continue to meet new devices and other needs.

In this manner, depending on your experience with software engineering, the term Design System may sound strange and may not be so present in your day-to-day. However, even though it is not the primary objective of his work, it ends up being important many times, even if subtly, in the decision-making of direct business interest.

So, take as an example Google's own Design System, better known as Material [ 4 ], which is the foundation for developing the best experience for users of Google's own products.

Material is a design system created by Google to help teams create high-quality digital experiences for Android, iOS, Flutter, and the web.

Well, at this point things should be a little better connected. We have on the one hand the practice of basing decisions and implementations on what current APIs (see Viewport [5] for more) offer us and on the other hand the continuous evolution of devices and the business decisions themselves.

Hence, the terms Component-based and Page-based arise, which are part of discussions for different development approaches. It came across that the APIs have limitations that, as put by Una Kravets herself, make it increasingly difficult to extract the best of what they propose to offer.

So, you can imagine that such issues technically affect the choice between development approaches (Component-based and Page-based), also affecting business performance in the end because it is in the general interest (or should be) that products continue to meet new requirements. devices and other technologies.

Conclusion

Since the term Responsive Design was coined by Ethan Marcotte in 2010, it has been possible to see numerous advances that in some ways were determined by the needs that users have as new devices are introduced into the routine.

Like many things in technology, today's APIs are modern, functional but lacking in much finesse. We are entering a world where micro and macro layouts are developed and current APIs do not have the (expected) ability to respond to the new needs required by components.

Links and tutorials

Visit https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design to learn about current responsive design techniques (Reference 2022)

web.dev — The new responsive: Web design in a component-driven world

References

[ 1 ] How to Make a Responsive Website in 3 Easy Steps (catswhocode.com) (may contain banners)
[ 2 ] Responsive design (developer.mozilla.org/)
[ 3 ] web.dev — The new responsive: Web design in a component-driven world
[ 4 ] Material — Design System da Google
[ 5 ] Viewport API — https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API#interfaces
[ 6 ] Cover image was taken from - 5 Reasons Web Components Are Perfect for Design Systems

Media Queries Level 5: the ability to respond to user needs

Angéllica Araujo ・ Apr 2 '22

#css #html #javascript #beginners

DEV Community: Angéllica Araujo

Sharing Modules Across Different Applications: Dynamic Module Federation with Nx Workspace

Practical example using the Nx workspace

Tipos condicionais no TypeScript: exemplos práticos e uso avançado

Conclusão

Referências

Angular: Como o framework evoluiu para atender às demandas do desenvolvimento web

Evolução, desempenho e funcionalidades para conquistar o futuro

Funcionalidades e melhorias no Angular

Olhando para o futuro

O Futuro do Gerenciamento de Dependências com Import Maps

Um Olhar sobre os Import Maps e seu potencial

Direções futuras possíveis para import maps

Integração com gerenciadores de pacotes

Integração com ferramentas de build

Suporte para importações dinâmicas

Referências

Desenvolvimento de aplicativos web com frameworks JavaScript e os princípios do PESPA

PESPA (Progressively Enhanced Single Page Apps)

Frameworks e bibliotecas

Continue estudando o assunto

Hydration: what type of experience you are building

Media Queries Level 5: the ability to respond to user needs

The ability to respond to user needs

Media Features

User-preference based media features

Conclusion

Additional reading and tutorials

References

The reason why a new responsive web is emerging

The actual scenario for Responsive Design

Building a new design perception

Conclusion

Links and tutorials

References

Related

Media Queries Level 5: the ability to respond to user needs

Angéllica Araujo ・ Apr 2 '22