AJR/TechradarDev
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: update links and remove .html extension

Browse Source
This commit is contained in:
Mathias Schopmans
2024-03-12 11:42:36 +01:00
committed by Mathias Schopmans
parent bc1e5b2d70
commit daa86a3f59
75 changed files with 103 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
radar/2023-11-01/diagrams-as-code.md
View File

@@ -7,7 +7,7 @@ tags: [architecture, quality assurance, documentation]
Documenting concepts and software architecture as diagrams using code offers significant benefits over heavier solutions. Treating documentation and diagrams as code and checking them into version control increases transparency, collaboration, and productivity. The textual representation of diagrams is easy to write and read, and generating graphical representations as SVG or PNG images is also straightforward with the associated tools.
We extensively use [PlantUML](/tools/plant-uml.html) in combination with [Asciidoc](/tools/asciidoc.html) and tools like [AsciiDoctor Diagram](https://asciidoctor.org/docs/asciidoctor-diagram/) to include and inline PlantUML diagrams in our documentation. The latter allows for a variety of other diagram formats, which can be easily mixed and matched.
We extensively use [PlantUML](/tools/plant-uml/) in combination with [Asciidoc](/tools/asciidoc/) and tools like [AsciiDoctor Diagram](https://asciidoctor.org/docs/asciidoctor-diagram/) to include and inline PlantUML diagrams in our documentation. The latter allows for a variety of other diagram formats, which can be easily mixed and matched.
Other tools worth mentioning include:
- [Mermaid](https://mermaid.js.org/), a JavaScript-based diagramming tool natively supported by many common tools (e.g., GitHub, GitLab, Gitea, Notion, etc.).

2
radar/2023-11-01/fluentd.md
View File

@@ -5,6 +5,6 @@ quadrant: tools
tags: [devops]
---
[Fluentd](https://www.fluentd.org) remains a great tool for collecting logs, transforming them into any required format, and distributing them to various logging backends. However, in recent years, we have often transitioned to [Grafana Loki and Promtail](/platforms-and-aoe-services/loki.html) for several reasons.
[Fluentd](https://www.fluentd.org) remains a great tool for collecting logs, transforming them into any required format, and distributing them to various logging backends. However, in recent years, we have often transitioned to [Grafana Loki and Promtail](/platforms-and-aoe-services/loki/) for several reasons.
We've also learned that extensive upfront log parsing carries a risk of losing logs and requires significant effort. This doesn't fit well with most projects.

4
radar/2023-11-01/flux.md
View File

@@ -6,8 +6,8 @@ tags: [frontend]
featured: false
---
In the early days of [React](/languages-and-frameworks/react.html), [Flux](https://github.com/facebookarchive/flux) was introduced by Facebook as an architectural pattern for managing global state. Later, it evolved into a library, with contributions from the community.
In the early days of [React](/languages-and-frameworks/react/), [Flux](https://github.com/facebookarchive/flux) was introduced by Facebook as an architectural pattern for managing global state. Later, it evolved into a library, with contributions from the community.
Today, there are numerous libraries that offer the Flux pattern or similar approaches to state management. These include framework-agnostic solutions like [Redux](/languages-and-frameworks/redux.html) or [MobX](https://mobx.js.org/README.html), as well as framework-specific options like [Pinia](https://pinia.vuejs.org/) for Vue and [Zustand](https://docs.pmnd.rs/zustand) for React, among many others.
Today, there are numerous libraries that offer the Flux pattern or similar approaches to state management. These include framework-agnostic solutions like [Redux](/languages-and-frameworks/redux/) or [MobX](https://mobx.js.org/README.html), as well as framework-specific options like [Pinia](https://pinia.vuejs.org/) for Vue and [Zustand](https://docs.pmnd.rs/zustand) for React, among many others.
One of the most popular solutions to date is Redux, which is why we use it in several projects.

2
radar/2023-11-01/green-it.md
View File

@@ -10,7 +10,7 @@ In an age of ever-increasing digitalization, the energy consumption of data cent
### Sustainable Software Development Practices
Well-architected software plays a pivotal role in reducing the environmental impact of digital systems. Sustainability in software development involves the consideration of various factors throughout the entire lifecycle:
- **Agile and Modular Development**: Develop software iteratively, focusing on essential functionality and creating modular, reusable components.
- **Programming Language Choice**: Opt for compiled languages such as [Rust](/languages-and-frameworks/rust.html) or [Go](/languages-and-frameworks/go-lang.html) that have lower energy consumption during execution.
- **Programming Language Choice**: Opt for compiled languages such as [Rust](/languages-and-frameworks/rust/) or [Go](/languages-and-frameworks/go-lang/) that have lower energy consumption during execution.
- **Automation and Infrastructure-as-Code**: Automate resource management and shut down unused infrastructure during idle periods to decrease energy consumption.
- **Demand Shaping**: Schedule energy-intensive workloads to align with the availability of renewable energy sources.
- **Green Power**: Source electricity from sustainable and renewable sources.

2
radar/2023-11-01/next-js.md
View File

@@ -7,6 +7,6 @@ tags: [coding, frontend]
We are convinced that Next.js is one of the go-to frameworks for React, and we're excited about the features that version 13 has brought with it. During the Next.js Conf 2022, the team announced some exciting adaptations in this release, but the most interesting one is the new "app" router. In collaboration with the React team, this new routing architecture brings some of the newest and most promising features of React 18 to life.
When using the app router, every component, by default, becomes a [React Server Component](/methods-and-patterns/react-server-components.html), making it one of the first real integrations of this pattern in a framework. The goal is to build complex interfaces while minimizing the amount of JavaScript shipped to the client. Another exciting feature is Streaming, which allows incremental transfer of parts of the UI to the client as they become ready. For example, immediately showing some fallback UI until an asynchronous action is completed, and then streaming the final UI to the client. With the app router, it's also possible to easily create shared layouts that preserve state during navigation and remain interactive.
When using the app router, every component, by default, becomes a [React Server Component](/methods-and-patterns/react-server-components/), making it one of the first real integrations of this pattern in a framework. The goal is to build complex interfaces while minimizing the amount of JavaScript shipped to the client. Another exciting feature is Streaming, which allows incremental transfer of parts of the UI to the client as they become ready. For example, immediately showing some fallback UI until an asynchronous action is completed, and then streaming the final UI to the client. With the app router, it's also possible to easily create shared layouts that preserve state during navigation and remain interactive.
The good thing is that this new architecture can coexist alongside the old page router, giving us the flexibility to incrementally adapt to the new features in existing projects.

2
radar/2023-11-01/react-server-components.md
View File

@@ -11,6 +11,6 @@ This new feature enables the creation of components that exclusively run on the
In addition to server components, there are client components, which are essentially the classic components everyone is familiar with. The only distinction is that client components need to be explicitly declared using a directive. Determining which components should be client or server can be one of the more challenging aspects, especially when the goal is to migrate existing applications.
RSCs appear to be most effective when used with Server Side Rendering, although it is possible to use them without it. RSCs and Server Side Rendering complement each other well, as server components are only rendered once on the server and do not need to be sent to the client. Client components are still rendered on the server and then hydrated on the client side. However, with a well-structured application that minimizes client-side code and in combination with React 18's [Suspense and Selective Hydration](https://github.com/reactwg/react-18/discussions/37) features, a performance boost is expected. To test this hypothesis, the React team has collaborated with Vercel, the maintainer of [NextJS](/languages-and-frameworks/next-js.html), to integrate RSCs into a suitable environment early.
RSCs appear to be most effective when used with Server Side Rendering, although it is possible to use them without it. RSCs and Server Side Rendering complement each other well, as server components are only rendered once on the server and do not need to be sent to the client. Client components are still rendered on the server and then hydrated on the client side. However, with a well-structured application that minimizes client-side code and in combination with React 18's [Suspense and Selective Hydration](https://github.com/reactwg/react-18/discussions/37) features, a performance boost is expected. To test this hypothesis, the React team has collaborated with Vercel, the maintainer of [NextJS](/languages-and-frameworks/next-js/), to integrate RSCs into a suitable environment early.
Overall, we recognize the potential of this new approach, even though there are several steps to take, particularly for meta-frameworks to achieve production readiness. It appears to be only a matter of time before adoption of React Server Components becomes widespread. This is why we have placed it in the assess ring, keeping a watchful eye on this evolving technology.

4
radar/2023-11-01/react.md
View File

@@ -5,7 +5,7 @@ quadrant: languages-and-frameworks
tags: [coding, frontend]
---
React today is the most widely used frontend library within our company, employed in various forms. Whether it's integrated into frameworks like [NextJS](/languages-and-frameworks/next-js.html) and [Remix](/languages-and-frameworks/remix.html) or utilized for client-side-only applications, React plays a significant role in many of our ongoing projects. Over time, a community of experts has emerged within the company.
React today is the most widely used frontend library within our company, employed in various forms. Whether it's integrated into frameworks like [NextJS](/languages-and-frameworks/next-js/) and [Remix](/languages-and-frameworks/remix/) or utilized for client-side-only applications, React plays a significant role in many of our ongoing projects. Over time, a community of experts has emerged within the company.
We firmly believe that React 18, with its range of new features, will further enhance its popularity within our company and the broader community.
@@ -13,7 +13,7 @@ We firmly believe that React 18, with its range of new features, will further en
While not an entirely new feature, Suspense was initially introduced in a basic version back in 2018. However, it had certain limitations. Its first official use case was code splitting with `React.lazy`, but this feature was only available on the client side, not during server rendering. The primary goal has always been to enhance the loading experience both on the client and server. With React 18, Suspense now enables Streaming server rendering, a new feature that allows React to send the HTML of the loading fallback first and then, after loading completes, send the actual HTML content to the client. The React team continues to work on improving Suspense, particularly to enable data fetching libraries to use it. They are collaborating with authors of some of the most prominent libraries like TanStack Query, SWR, and Apollo.
### Server Components
Server Components represent a new paradigm in React application architecture with the goal of minimizing the amount of JavaScript sent to the client. This approach introduces a new type of component that operates exclusively on the server. It shows great promise, which is why we have given [React Server Components](/methods-and-patterns/react-server-components.html) a dedicated entry on our Tech Radar.
Server Components represent a new paradigm in React application architecture with the goal of minimizing the amount of JavaScript sent to the client. This approach introduces a new type of component that operates exclusively on the server. It shows great promise, which is why we have given [React Server Components](/methods-and-patterns/react-server-components/) a dedicated entry on our Tech Radar.
### Concurrency
This is a fundamental update to React's rendering model, primarily occurring under the hood. It introduces the ability to create multiple versions of a user interface concurrently. With concurrent React, rendering can be interrupted, abandoned, and resumed, allowing the application to respond to user interactions immediately, even if it's currently in the middle of rendering.

2
radar/2023-11-01/sketch.md
View File

@@ -6,4 +6,4 @@ tags: [ux/ui]
featured: false
---
Sketch is no longer used by Team XD as we have moved to [Figma](/tools/figma.html) and just finished the last project done in Sketch.
Sketch is no longer used by Team XD as we have moved to [Figma](/tools/figma/) and just finished the last project done in Sketch.

8
radar/2023-11-01/state-management-pattern.md
View File

@@ -5,10 +5,10 @@ quadrant: methods-and-patterns
tags: [architecture, coding]
---
State Management is a design pattern with the goal of efficiently sharing state data across components while separating domain representation from state management. This pattern is widely used in many popular web frameworks such as [Vuex](/languages-and-frameworks/vuex.html) or [Redux](/languages-and-frameworks/redux.html).
State Management is a design pattern with the goal of efficiently sharing state data across components while separating domain representation from state management. This pattern is widely used in many popular web frameworks such as [Vuex](/languages-and-frameworks/vuex/) or [Redux](/languages-and-frameworks/redux/).
Especially in [reactive](/methods-and-patterns/reactive-programming.html) systems, this pattern helps in maintaining decoupled, stateless components with immutable data. The implementation of state management varies and depends on the specific requirements of the application at hand.
Especially in [reactive](/methods-and-patterns/reactive-programming/) systems, this pattern helps in maintaining decoupled, stateless components with immutable data. The implementation of state management varies and depends on the specific requirements of the application at hand.
For distributed backend systems, one might consider utilizing [Akka's](/languages-and-frameworks/akka.html) cluster sharding module to elastically manage domain object states.
For distributed backend systems, one might consider utilizing [Akka's](/languages-and-frameworks/akka/) cluster sharding module to elastically manage domain object states.
We employ various state management patterns across most [Vue](/languages-and-frameworks/vue.html) and [React](/languages-and-frameworks/react.html) projects that require them.
We employ various state management patterns across most [Vue](/languages-and-frameworks/vue/) and [React](/languages-and-frameworks/react/) projects that require them.