Hi! Here is Frontend News. What's in the 30th episode?
- Javascript Projects to watch this year
- New NPM security features
- SvelteKit 1.0
- GitHub alerts in public repositories
- Vite 4.0
- NX 15.3
Projects worth watching
Looking forward to 2023 upcoming growing projects, we’re gonna make w quick look through the most interesting and worth attention projects in the Javascript world.
Turborepo
First one - turborepo - the build system created by Vercel which uses caching for simplified building by only having to build what changes. The most interesting and coolest feature in turborepo is remote caching - which allows you ta access your turborepo cache on a remote server, allowing multiple machines to access the same cache - it is especially useful when working with multiple people on the same project. So if you are looking for some new build system turborepo will be definitely worth watching
Tauri
The next project is a desktop app framework called Tauri. It utilizes web view to allow writing desktop apps using web technologies without embedding a browser. You also do not need to embed node.js as Tauri’s backend is written in Rust, not JS. Its easy to use, especially when you need simple API you can call to perform variety of native tasks like showing notifications, filesystem manipulation and much more. So if you are interested building desktop apps with Javascript - tour is something you should have a look at.
Bun
Lets take a step for the next project which we are gonna mention and already talk about in our previous frontend news series - Bun. So to recap - Bun is a new javascript runtime which offers variety of built in tools, great performance and better web support. It aims to replace Node and Deno, but for now it is in early stage and still missing a lot of features. Its quickly making progress, adding support for new APIs and features and is for sure likely to grow a lot over 2023.
Remix
Another project which we’re gonna highlight is a react framework built by creators of React Router - Remix - which is going to bring better performance, modern web standards, and better routing / loading strategies to web development. It relies on server side rendering which means its designed to perform most rendering , data retrieval and other operations on server rather than client. Its definitely worth following this year.
Turbopack
Number five in the list is turbo pack - like turborepo created by Vercel and is now trying to replace Webpack. Its in early stage now, but due to usage of Rust rather than Javascript, Turbopack pretends to be significantly faster than both Vite and Webpack in both starts and file updates - so we recommend you to stay tune with this project and keep waiting for the upcoming news.
Astro
Last but not least is Astro - a static site generator which focuses on ease of use and performance. Astro's greatest feature so far is called astro hydration - which enables client to isolate the client hydration code to just the components that need to be interactive. It also supports variety of Javascript libraries like React, Vue, Svelte and Solid. Astro definitely gonna grow and will be very interesting project in 2023.
We hope this projects will broaden your curiosity - you can check the full article about that in the description ( we provided a link ) and you can follow and subscribe to each of these projects official websites If you want.
NPM’s new security features
Nów we’re jumping to the second news which are NPM’s new security features.
So NPM announced two main new features for a safer NPM package ecosystem - granular access tokens and rpm code explorer
The first one is about helping npm maintainers more effectively manage the risk of exposing token compromise. Granual access token allows nom package maintainers to create fine-grained access tokens. You can create tokens to manage one or more organizations, teams and members. It lets you also limit npm API access based on IP ranges and automates your management.
The second thing is the new code explorer, which provides you the view for the contents of a package directly from the nom portal. It enables to make a quick overview over the package before using it, what’s worth mentioned it was previously paid feature - now you can try it for free ! The most important thing about code explorer is that it is more stable, faster, and works for almost all nom packages from the official registry. You can also view any prior version of a package.
If you are really interested in these two features - please check a link in the description and share your opinion with us.
Release of Svelte Kit in version 1.0
The third news for today is the release of Svelte Kit in version 1.0.
For those who doesn’t know - Svelte is a framework for building web applications on top of Svelte -the UI component framework which has great performance and is really easy to use. It uses Vite, the lighting fast build tool, and has really great support for hot module reloading, Typescript and many other things. Online traditional multi page app or MPA frameworks it defaults to client side navigation after the initial server-rendered page load - it leads to faster page transition and less data usage. What is more it allows you to use one language instead of having two apps - it runs wherever Javascript runs so you can deploy it as a traditional Node server or using server less functions. With this framework you have a real flexibility of doing everything on what developers rely on.
By the release of version 1.0 , svelte is now finally ready for production use. The future roadmap includes built in i18n support, incremental static regeneration, granular control over deployment region and runtime, image optimization, and many other.
If you can’t wait to see more and try it out - please follow the link from the description and let us know what do you think about it.
Github Alerts
The next news for today is about Github Alerts. Github now started to roll out secret scanning to all free public repositories in the GitHub community - for free. What is secret scanning ? It basically notify you about leaked secrets in your code. By using this feature in your public repositories you.can help prevent secret exposure and build an open source with much greater confidence. As the exposed secrets and credentials are the most common cause of data breaches and often goes untracked, this is definitely a good news which take the GitHub open source projects and public repositories to the next level.
Vite version 4.0
Number five in our today’s list of news is Vite version 4.0. The Vite team is happy to announce the release of version 4, powered during build time by Rollup 3. It allowed to simplify Vite’s internal asset handling and comes up with many improvements. And here are the most important ones :
The first is New React plugin using SWC during development.
SWC is a replacement for Babel and its React fast Refresh implementation is a lot faster than it. It is now a better alternative.
The second thing is changes regarding browser comompatibility which now targets safari 14 by default for wider ES2020 compatibility.
Another feature from Vite version 4 is importing CSS as a string and Environment variables.
Whats more in Vite 4 and is worth mentioning - is reduced package size and visible upgrades to Vite core. Vite 4 install size is 23% smaller compared to Vite 3.2.5 ( the latest previous version).
If you know to learn more about the new Vite release - take a look in our links in the description or Visit the official Vite website.
NX version 15.3
Last but not least for today is the release of NX version 15.3. It comes up with plenty of new features, upgrades, improvements like standalone projects, Vite & Vitest, task graph, nx init, root level scripts and simplified run-commands. And we will tell you a little bit about a few of them.
The first thing is task graph. By this feature you can select a target from the Target Name dropdown to filter the list of projects to only those with that target. By clicking on a project you can show that target’s task graph. You can also then add another projects showing what the task graph looks like for a command that runs task for multiple projects. For those who doesn’t now - the improved task graph lets you visualizes your project graph, mapping the dependencies different projects have on on another through imports and exports in the code. So with the more powerful task graph it is easier to get an overview what’s happening in the project.
Nx
Next feature worth mention are standalone projects. Nx is widely known as THE developer tool people look at when it comes to implementing monorepos in the frontend space. It can be beneficial even outside of the typical monorepo scenario. In particular, Nx plugin features such as code generation, pre-configured build tooling setup, and battle-tested integration with best practices tools (e.g. Cypress, Jest, ESLint, Vite, …).
In 15.3 we are therefore making standalone projects a first-class feature. Suppose you now create a new workspace with npx create-nx-workspace alongside the usual monorepo options. In that case, you will now see two more options for scaffolding a standalone React or Angular application (we will add more in the future).
In a standalone project setup, you don’t have the typical apps and libs structure you might be accustomed to if you have been using Nx in the past. Instead, the app lives directly at the root of your workspace.
Have a nice watch. Soon we will add a transcription for you to read here. :)
