Hi! This is Frontend News - meet fresh news from the frontend world. What’s in Frontend News 26?
Angular V14
The first news which we’re gonna talk about is the latest version of angular - the fourteenth. It was released on the 3rd of June, and we’re gonna make a short overview of this update’s latest changes and features.
Standalone Components
So first things to mention are standalone components - which In v14, are in the developer preview. It means that you cannot use it for production purposes but you can try it out and share your feedback with the Angular Community - they are likely to have it. The most important thing about stand-alone components is that they allow you to directly add imports such as components, directives, pipes, and modules to the component without using NgModule.
In addition to that, you can generate such components using the new ng generate component <name> --standalone command. Typed Reactive Angular FormsThe next big thing from angular version 14 is typed reactive angular forms. This new edition adds strict typing for the angular reactive forms package and resolves one of the must demand GitHub issues. It basically means that now all the values inside arrays, form controls, and groups are completely type-safe across the entire API which enables safer forms, especially for deeply nested more complex cases. What is more, you can gradually add typing to your existing forms with full backwards compatibility using the ng update command - which should replace all the form classes with untyped versions.
Angular CLI Enhancements
Another thing worth mentioning regarding the latest version of angular is CLI Enhancements - and we’re gonna focus now on some of them. The first one is ng completion - a new feature which provides auto completions in real-time when you type a command. You can set up this also manually by running the ng completion command. The next one is ng analytics and ng cache commands which enable printing and controlling analytics information and printing all the cache information.
Extended Developer Diagnostics
Speaking about the next thing we have also extended developer diagnostics which allows collecting more information on templates by giving compile-time warnings with precise actionable suggestions.
Typescript 4.7 Support
Last but not least with the latest version of angular we have also support for typescript 4.7 as it was released a few days back. There are much more things to talk about - you can check the full list of upgrades, new features and changes on the official angular website.
Storybook 6.5
And now we’re gonna jump to the second news, Storybook 6.5. The storybook team describe it as their biggest release yet, which adds and upgrades lots of features like powerful interaction testing and design review workflows which improves storybook performance and compatibility. So what’s in ?
Interaction testing
Firstly we’re gonna mention interaction testing, which is all about allowing you to simulate and verify user behaviour in the browser. It gives us all of the features of modern testing tools, with convenient workflow, especially for UI developers. The interaction panel now visualizes each interaction which is being simulated, and what is more, you can now customize the test runner via hooks API.
Figma plugin for design review
The next thing worth mentioning which we have already spoken about a little bit in our previous frontend news podcast is the ability to use the new Storybook Connect Figma plugin for design review. As mentioned before - it improves communication and has plenty of axons for viewing designs in Storybook, the most important feature is that you can embed stories in design tools now.
Faster developer experience
Another thing which we would like to speak about regarding Storybook 6.5 is faster developer experience improvements which include Faster DX - Webpack 5 Lazy Compilation for faster startup, faster load times for code splitter and published storybooks, ESM support and stable version of Webpack 5, and re-architected storybook to support modern builders such as previously mentioned Webpack 5 and Vite.
With web pack 5 lazy compilation it is said that it improves 3 x faster startup times and 2 x shorter rebuild times. It is now in built feature in web pack 5 and storybook uses it to boot up more quickly. Of course, we have much more things to check and see, if you want to read about the full list of changes and features you can check the official storybook website for the release notes.
Bootstrap 5.2.0 Beta
The next news from our list, which we gonna mention now is Bootstrap 5.2.0 Beta which was published recently and is being called the biggest release of this framework since Bootstrap 5.0. And I hope you are curious: what is it about?
Redesigned docs page
So with the latest version of Bootstrap, we have now redesigned and refreshed docs, which makes everything feel brand new. The main aim of this was to better show off all of the awesome features of Bootstrap, so we have for example refreshed the quick start guide, changed and refreshed the sidebar structure, and improved the search feature - which helps you navigate through the bootstrap docs faster and easier.
Design tweaks
The next things which we’re gonna mention are some design tweaks regarding buttons and inputs. These small changes are that they are refreshed with some refined border-radius values.
Component CSS Variables
Another thing is that with this release of Bootstrap all of the components now include CSS variables to enable real-time customization, easier theming and more. So the values for every CSS variable are assigned now via the Sass variable so customization via CSS and Sass are now both well supported. Responsive offcanvasWith the Bootstrap version 5.2 we have also a responsive off-canvas component upgrade which now has responsive variations. It means that when you want to make it responsive you can change the old off-canvas class - which remains unchanged, and also works the same as before with any of the sm, md, lg, xl, xxl classes.
Dark Mode
Last but not least - it is also being said that finally the dark mode is coming to bootstrap, and it will happen in the next minor release so please stay tuned! Of course, there is much more information and features/ upgrades which you can check on the official Bootstrap website linked in the video description.4. Cypress 10So now we’re gonna speak something about Cypress version 10 with Component Testing Beta. It comes with a reworked, modernized interface, a new modern UI which is integrated better into the overall development experience and of course, has lots of great features which we’re gonna highlight for you now, so we have a new testing type (previously mentioned Component Testing), possibility to easily switch between testing types without having to close the browser (cool improvement), the new javascript/typescript based config file which means greater runtime possibility, automatic migration from previous cypress versions, new onboarding experience to get up and running much faster and more.
Component Testing Beta
We’re gonna focus a little bit more on the most important one - which is a component testing beta- directly integrated into the main app. It allows you to choose which testing experience you want upon launching the Cypress app which means you can start testing frontend components and develop web applications using the same API that you are already familiar with from end to end testing. Cypress Component Testing tests are rendered in a real browser, you can see your components rendered in a real browser during the test which gives you as a developer the good feeling that your component is displaying and behaving as you expected. More of that - you can use dev tools which are available, so inspect your HTML, modify styles, and debug your code without any additional setup. You can read more about all of these new features on the official Cypress website linked in our video description.
Meteor 2.7.3
What we’re gonna jump to now is the Meteor version 2.7.3 - the latest release. It mainly brings updates to the Node version regarding introduced security updates, adds support for MongoDB 5.0 which brings some breaking changes with the new API and upgrades nom to version 6.14.17. Of course, there are some more changes which we gonna have a quick look at now.
Making the client smaller
The first thing is that the Meteor team made the client a little bit smarter by removing the message which was being shown while importing the @babel/runtime package both onto the server and client, especially when it needs to be updated - now it is removed from the client so we do not need to import babel to the client anymore - which reduces client size.
Adjusting accounts-passwordless package
Other things are the adjustments and fixes to accounts-passwordless package - which fixes the token not being sent issue while calling requestLoginTokenForUser - email is case insensitive when comparing it on the server, and if for some reason no token is sent, a warning will be thrown.
Tailwind Skeleton
Last but not least regarding Meteor version 2.7.3 is the Tailwind skeleton - it means that you can now create a new meteor project with react and Tailwind already set up just providing the —tailwind flag. The other thing regarding Meteor Version 2.7.3 is that there is a fix/ upgrade regarding indexes in Mongo DB. Now Meteor checks if it is an issue with the changed options of the same index, and if it is - it re-creates the index - if not an improved error will be thrown to provide the collection and name of the index where there is a failure. Please feel free to check out the full list of the upgrades/ fixes and features on the official meteor website.
Next.js RFC Layouts
And last but not least - we have some news from Next.js - it’s RFC Layouts - one of the biggest updates to next.js since it was introduced in 2016. The aim of this update was mainly to improve the developer experience of creating layouts, that can be nested, shared across routes and have their state preserved on navigation - generally have more advanced routing solutions.
So basically what we’re gonna highlight from this topic is :
- Nested layouts - which allow you to build complex applications with nested routes
- Server Components adjustments - which are optimized for subtree navigation (upcoming react feature)
- Improved data fetching - which means fetching in layouts while avoiding waterfalls
- Upgrades regarding React 18 features like streaming, transitions and suspense
- Client and Server Routing - which means server-centric routing with SPA-like behaviour
- Advanced Routing conventions like offscreen stashing, instant transitions
- 100% adoptable - you can adapt to these updates gradually
We highly recommend you to check and read about all of these new features and updates on the official next.js website, where you can find a rich explanation about each of the above-mentioned topics.
