開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。

2024年2月3日，開源日報第1094期：
今日推薦開源項目：《CyberChef》
今日推薦英文原文：《Modern Front-End Applications》

開源項目

今日推薦開源項目：《CyberChef》傳送門：項目鏈接

推薦理由： CyberChef是一個用於加密、編碼、壓縮和數據分析的網路應用程序，可在Web瀏覽器中執行各種「網路」操作。這些操作包括簡單的編碼（如XOR和Base64），更複雜的加密（如AES、DES和Blowfish），創建二進位和十六進位轉儲，數據壓縮和解壓縮，計算哈希值和校驗和，IPv6和X.509解析，改變字元編碼等等

英文原文

今日推薦英文原文：Modern Front-End Applications

推薦理由：該文章探討了現代前端應用的關鍵要素, 文章涵蓋了技術選擇、現代框架（React.js、Angular、Vue、Vite.js、Next.js、Three.js、Tailwind、GraphQL等）以及設計系統的重要性

Modern Front-End Applications

In the ever-evolving world of web development, staying abreast of the latest trends and technologies is paramount for creating compelling user experiences. Modern front-end applications leverage a diverse set of tools and frameworks to achieve responsiveness, interactivity, and maintainability. In this article, we』ll explore the key elements that define the landscape of modern front-end development.

Technology Selection

Although speed is an important concept in the front end world, other issues such as performance are also among the important criteria in technology selection. Probably everyone has already started to realize that it is an unnecessary effort to get into discussions that start with the comparison of technologies such as Angular and React. Decisive criteria in technology selection;

💡 Analysis — Need — Goal. Every technology emerges for a purpose and you should choose the most suitable one for your purpose.

In general, technology has started to evolve from a single framework dominating the application to a combination of tools, each focused on its own field, coming together to form the whole. This gives us the opportunity for modular development environments.

What are the modern Frameworks?\

JavaScript Frameworks: The Foundation of Modern Web Apps

React.js: 🚕💨 React is a fast, simple library that can offer us the high performance we aim for. In addition to adequate community support, a big company like Facebook is behind it and these are just a few reasons why we prefer it. Even though it has some shortcomings (it』s quickly catching up), it』s at a reasonable level to go into production. If you want to stay away from dom manipulation, it』s a good option for you. Because every touch to the dom means performance loss. React is quite successful in the view layer and is a good companion with its simplicity.

img

Framework War 1

Angular

🚀Angular is a full-fledged JavaScript-based frontend framework supported by Google, and the modularity and component-based approach it provides have garnered a strong community among frontend developers worldwide.

Its simplicity makes this framework perfect for single-page applications, and though some developers say that it』s a bit harder to learn Angular than React, it』s definitely worth it as there is a high demand in the market for experts in this technology, with Angular developer demand showing predicted growth of approximately 31% between 2016 and 2026

img

Vue

⚡️Vue is considered one of the best frontend options for single-page web applications, and is a JavaScript framework designed for creating user interfaces that provides a declarative and component-based programming experience, similar to React and Angular, with millions of weekly downloads on npm, demonstrating its popularity in the market.

img

Vite.Js

Vite.js🌳 is a fast and lightweight build tool and development server designed for modern web development. It is specifically optimized for building web applications that use modern JavaScript frameworks like React, Vue.js, and Svelte. Vite.js achieves its speed by using an innovative development server that leverages native ES modules in the browser, enabling rapid hot module replacement and fast initial load times.

Additionally, Vite.js supports features like CSS preprocessing, TypeScript support, and a plugin system for extending its functionality.

img

Next.Js

Next.js✴ is a tool that helps you build super-fast websites with the help of React. Whether it』s static site generation or server-side rendering, you can choose either approach depending on your project needs. The performance of web pages based on the Next.js framework is outstanding due to multiple optimization techniques it uses, like pre-rendering. Additionally, the framework is also SEO-friendly, which is a big advantage for online businesses and marketing projects.

img

Three.js

Three.js 🌏 is a JavaScript library used to create 3D web graphics and animations. A huge advantage of this framework is that it』s becoming more popular every year. At the moment, Three.js has gathered almost 94,000 stars on GitHub in 2023. With greater community support, improvements in debugging and documentation can be expected over time.

img

Tailwind

Tailwind🔥 is a CSS framework that allows you to create styles directly in your HTML markup by adding proper classes to particular elements. This approach makes it super easy and fast to create styles and change them whenever needed.

img

GraphQL

GraphQL🌘 is a query language for APIs. It gives you exactly what you need from the server without any unnecessary data. Thanks to its performance and the amazing developer tools that come with it, GraphQL became a trending technology in the modern web development world.

img

Design system

Design systems are sets of standards created to manage design with predefined and reusable components. For example, imagine that you decided to use Material-UI (MUI) as a design system for your product. If you need to implement a new component, there is a high chance that you will find it in the MUI documentation.

Some popular design system examples include Chakra UI, Ant Design, and MUI.

img

Asa result, technology selection, modular development environments, fast performance, and integration of various tools and frameworks to enhance user experience play an important role in the development of modern front-end applications. In this dynamic environment, making the right technology choice by focusing on analysis, needs and goals is a critical factor to create impressive and up-to-date web applications.

下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/