DEV Community: Lex Kuncevic

ng-conf 2022 highlights

Lex Kuncevic — Sun, 25 Sep 2022 11:47:44 +0000

I arrived at ng-conf in the evening on the 31 of August right at the time when registration should already be opened. The conference kicked off with the Misko’s Hevery workshop “Building Fast WebApplications” and I was looking forward to attending it. However, turned out I was 1 hour late for this one because I didn't really know there was an 1 hour time difference between California and Utah 😿. Next time if I travel from California to Utah I will keep in mind Utah is running one hour ahead 😀

So this evening I met a lot of people who I haven't been seeing in person: Misko Hevery, Shai Resnik, Jordan Powell, Joaquin Cid, Ryan Hutchison, Brandon Roberts, Alyssa Nicoll. Most of the people were really tired after the flight however were happy to get together and I had a chance to discuss a lot of things with Misko Havery who is now building a new framework called Qwik and Shai Resnik who was an official MC for the ng conf 2022.

The 1 of September was the official first ng-conf day that started with an awesome breakfast followed by a keynote from the Angular team and single track talks by the end of the day. On this day I managed to attend a few talks: “Angular TDD” by Shai Resnik, “Standalone Components” by Pawel Kozlowski and “Angular: A design review 10 years later” by Jeremy Elbourn and Alex Rickabaugh.

In the evening a lot of conference attendees split up into small groups and headed for dinner in different directions. Our group went to a place that has the most fun waiter that can serve Heineken -1 and Heineken -0 🤣🤣🤣

The next day was kicked off by a yoga session at 7:00 but it was not possible for me to wake up so early so I had to skip that experience. This day there were 2 different tracks, in other words multiple talks were running at the same time so if you visited one you would miss the other. Still I have an opportunity to catch up on all missed talks once they will be pushed online.

It was great to chat with people from Crunchbase, Ag Grid, Fidelity, Cypress, Syncfusion, Rangle, Octa, Herodevs, Nrwl, JetBrains, Advancedmd, Ionic and many others who were hanging around the conference booths. On the second day I met even more people whom I had not known in person before: Deborah Kurata, John Papa, Ward Bell, Dan Wahlin, Aaron Frost, Joe Eames, Jeff Cross, Mike Brocchi, Eric Slack, Manfred Steyer, Alex Okrushko, Michael Hladky, Isaac Mann and many many others. It was so great to meet you!

This time the evening was full of events like Angular Pull request workshop, Karaoke party, Board games, Trivia and more. I attended the board games and played this new game I had never played before called Coup. It was really exciting and fun experience playing this game.

Oh, and I forgot to tell you about my secret mission for the conference. Me, Joaquin Cid and Ryan Hutchison had to distribute the NGXS t-shirts, the mission was originally planned by Mark Whitfeld - the NGXS team lead. The idea was just to spread a word about NGXS around ng conf attendees and reward NGXS users with some swag. The mission was successfully accomplished by the third day of the ng-conf and helped to chat with even more cool people around there.

The third and the last day of the conference started with another yoga session that I skipped again. I love yoga but it was quite challenging to wake up early in the morning during the conf. The breakfast was followed up by Community Keynote and another series of awesome talks. On the third day I met people like Jonas Rexeke, Martin Kristell, Jason Warner, Sam Julien, Stephen Cooper and Joey deVilla who joined the Karaoke playing accordion live making Karaoke even more fun. It was great to chat to all of you guys!

I didn’t have a chance to stay up until the end of all events because I had to leave early as I planned to be in Vegas before the sunset. It is about a 6 hours drive from Salt Lake City to Vegas. However just before I left I took part in trivia organized by Adrienne Marshall and Melissa Garrett from Rangle. It was great fun answering all the Angular-related questions and actually winning the awesome Raspberry Pi Pico as a prize! Great finale of my first ng-conf!

Also on this day I made a promise. Awesome people from Octa gave me an ng-conf-2019-themed rubik's cube with a bit of history. I told them it would be passed to someone else the next year at ng-conf 2023. So I have no chance to miss the conference next year!

I left the ng-conf at about 3pm with a lot of memories and confidence I am coming back in 2023!

Thank you everybody for discussions, coworking and conference organisers for this terrific experience!

Road trip from San Francisco to Salt Lake City

Lex Kuncevic — Thu, 15 Sep 2022 05:50:54 +0000

This is a followup story for Traveling to ng-conf and visiting US for the first tim

San Francisco was my starting point for travelling to ng-conf. I did spend 3 days around here but still have a feeling that I haven’t visited all the cool places in the area.
Being an experienced bicycle rider I was really enjoying riding from the city centre all the way through the Golden Bridge. The most intriguing part of that ride was that the Golder Bridge was often fully covered by the enormous cloud and so technically was not visible at all. However shortly on the way back the cloud wasn’t there that opened all the views. Riding through those clouds was quite fun and always unexpected. Indeed, San Francisco is for a reason called a city of winds and fog.

It was a great meeting with my friends who are currently based in Silicon Valley, which is located about 80 km from the City Centre. So I had a chance to see the city and do my business.

It was great to visit the San Francisco Google Office. I should say that the view from that office is quite stunning! But the way cooler was to meet Angular Team in person! Minko Gechev, Emma Twersky, Mark Techson. Thank you for lunch and conversation! Hope to see you soon again, maybe in Australia?

One of the most famous parts of the Valley is Private Research Stanford University, a place where smartest minds are raised and great ideas are born. Visiting the place is like diving in a fountain of knowledge. I was really impressed and happy to have this location in my traveling collection.

Thank you, San Francisco! I am sure, we’ll see each other many times again!

My friends strongly recommended taking California State Route 1 that goes from San Francisco to Los Angeles along the ocean. This route has a lot of cool and beautiful parts like Mojave Mountains, San Simeon, Santa Barbara and Big Sur. I stopped at most of them. In particular I really like the ocean views, watching sea lions and visiting beautiful Hearst Castle on Enchanted Hill.

I hit Los Angeles late evening to catch the night vibes that clearly told me that it is a night city. I had to stop in the hotel right in the heart of Holywood to get access to all the famous tourist attractions, however it was one of the worst hotels I had ever seen, the name of that hotel sounds cool though.

The next day I visited the famous Petersen Automotive Museum that I enjoyed a lot. It has a huge collection of motorcycles including the ones with electric power and legendary cars from movies and cartoons. Visiting the Hollywood Wax Museum was also a very fun experience. So yeah, there are a lot of things to do in LA.

Next morning on my way to Las Vegas I visited the Six Flags Magic Mountain to enjoy a few roller coaster rides, the X-2 ride was quite impressive and probably the most exciting I’ve ever done. For the rest of the first hour the road to Vegas was quite boring, but since I had escaped all those big intersections the landscape changed dramatically and for the next couple of hours I enjoyed the mountain views that I had never seen before.
I reached Las Vegas late evening right at sunset. It was surprising to see even more people on the night streets than in LA. This reminded me of the NYE celebration that happens once a year on December the 31st in Sydney, but here people didn't celebrate anything, they just walked around and I had nothing to do but to join. It was a very impressive and crowded night.
All the big hotels on the main street of Vegas are connected by small bridges. Every hotel has a casino on the ground floor, so once you are checking in into one of them you like asking yourself if it really is a hotel or if you are staying in the casino. This is a very unique experience I must tell.

On the night streets of Vegas I met all of my best friends Minnie and Mickey Mouse and of course the main dude from my favourite The Hangover movie!

I really love those awesome characters. So I had to take a pic and walk into Caesars Palace Las Vegas Hotel, where the main scene for the original Hangover movie was shot. Oh, I should also tell, I was really impressed by the Bellagio Water Show that seems to be happening here every night.

Next morning I decided not to stay in Vegas any longer and move towards my final destination - the Salt Lake City. Oh man, I didn’t expect that Red Rocks could be such a view. I have to admit, the road around the rocks from Vegas to Salt Lake is even more spectacular than from LA to Vegas.

On the way from Vegas to Salt Lake just before Cedar City, there is a rocky park called Zion park, so I took this route through the park. The serpentine road goes very close to the Red Rocks so you had to make a stop every 10-15 minutes to enjoy that new rock view.

It took me about 3.5 hours to go through that park and so I decided to spend the night at Cedar City which is one of the smallest on the way to Salt Lake and fully surrounded by Red Rock mountains. This city is located from the main ng-conf venue at Salt Lake city just 3 hours away so I reached the destination the next morning.

Now rested and inspired by nature I am ready to get back to technologies at ng-conf.

Follow Angular Rocks on Instagram and see you soon!

Traveling to ng-conf and visiting US for the first time

Lex Kuncevic — Mon, 22 Aug 2022 22:21:38 +0000

TLDR;

This is like a dream came true, traveling to ng-conf and to the US for the first time.

The full story

The ng-conf has a long history and has always been my dream to visit. I was always watching the live event each year but participating in person is an absolutely different experience.

Finally in early 2020 I’ve decided to purchase an early bird ticket and was so excited about it, but everyone is aware of what's happening next - the COVID-2019 pandemic and so all in-person events had to be postponed.

So in result the ng-conf 2020 was adapted to online. Same happened in 2021.

Eventually after 2 years of tedious waiting I am going to travel to ng-conf myself!

I am looking forward to attending as many sessions as possible, and there are so many cool talks being announced by Jeff Cross, Shai Reznik, John Papa, Stephen Fluin, Brandon Roberts, Alex Rickabaugh and more.

I have known or followed many people from the Angular community online for ages, some of them were guests on Angular Rocks podcast and that’s a great opportunity for me to get acquainted in person and discuss any sort of professional subjects directly. Misko Hevery, Jeremy Elbourn, Minko Gechev, Justin Schwartzenberger, Alan Agius.

Besides, it is my first trip to the USA and I am going to visit a number of incredible places on my way to ng-conf, the places I have always dreamed about.

My arrival point and first stop is San Francisco, the heart of Silicon Valley. Imagine, I will visit Google headquarters and meet my Angular friends there! Maybe there is someone who wants to catch up with me in person?

And, of course, I will see the Golden Gates and Stanford University to feel the atmosphere of the most concentrated high-tech education in the world.

Next stop is LA and an agenda for there has not been set yet. Guys, is there someone who wants to meet and chat? What should I see in LA? Hollywood? Beverly Hills? Griffith Park or more?
Maybe there is any meetup tech or business group to attend around?

Las Vegas is also a city of open opportunities for me this time. As a host of Angular Rocks and amateur climber I just have to see the Grand Canyon and at first. What about Red Rocks Canyon or any other rocks?

Please advise.

What about any IT events around SF, LA?

Please write any of your suggestions in the comments, I will highly appreciate them!

By the way, to leave this trip in my and yours memories, I am going to hold a photo-challenge for my Angular Rocks Instagram followers and listeners @angularrocks

Everyday I am going to take a picture of something that might be associated with Angular Rocks and post it in stories. You can give me your options for an association.

The winners will be definitely rewarded with some awesome Angular Rocks branded swag!

So, looking forward for your comments and advice!

Follow @angularrocks and see you soon!

Python 2.7 was removed from macOS in this update and how to fix it

Lex Kuncevic — Thu, 05 May 2022 12:42:46 +0000

I was quite surprised this morning to find out that some of my apps stopped working. All of them rely on Python 2.

Who deleted my Python?

It took me a moment to realize that a new Mac OS 12.3.1 was installed overnight, so I thought it might be a reason.
And here it is.

Python 2.7 was officially gone from the system. Starting from version 12.3 Apple is not going to ship this version of Python anymore as a part of Mac OS.

Python 2.7 was removed from macOS in this update. Developers should use Python 3 or an alternative language instead.

The reason is that Python 2.x no longer maintained

However apps that rely on Python 2.x are tightly coupled with that version so having Python 3 won't really help.

So how would you fix it?

Here are a few simple steps that I followed.
First, install Homebrew if you haven't got it installed yet. Make sure that it works.

Now we need to get pyenv. Pyenv is a Python version manager that will help to manage Python versions. Once pyenv installed we needed to configure Python 2.7, and that is it.

Here are the terminal commands for that.

brew install pyenv pyenv install 2.7.18 ln -s "${HOME}/.pyenv/versions/2.7.18/bin/python2.7" "${HOMEBREW_PREFIX}/bin/python"

Additionally you can set the Python2.7.18 as global by running this command:

pyenv global 2.7.18

So, with these simple steps now I’ve got Python 2 back on my system and I hope this article will help someone too.

My name is Aliaksei Kuncevič. I am teaching Angular and Web Technology. Helping dev teams to adopt Angular in the most efficient way. GDE, member of the NGXS Core Team.

Thanks for reading, and ask your questions in the comments or contact me directly via linkedin or DM me on twitter

I hope you find this content helpful and if so, please help to spread this article so more people can benefit from it.

Additionally you may want to checkout my podcast where I am sharing cool tips and insights about Angular and interviewing an awesome guests 🎙

Angular learning curve is a journey

Lex Kuncevic — Thu, 05 Aug 2021 11:39:35 +0000

Every story can be very personal, but a story of a developer always ends up being framed.

Abundance of information

Learning Angular can be quite a task, especially when an abundance of online materials can be rather frustrating than helpful. And the trickiest part when working with information on the internet is that the verification process can be time-consuming. Today, when we live in a booming era of technology, time is precious like never before. Therefore productivity and cost-effective programming decisions are essential for any web developer who wants to succeed. Figuring out Angular tips & tricks comes not only with experience it also requires access to a good and trusted source of information.

Browsing the internet for answers can be exhausting, especially when opting for a self-learning Angular journey. Going through various books, online sources trying to figure out the correct solution can bring all the spectrum of emotions due to the majority of sources being too advanced. Most of the Angular materials available online presume that you are already intermediate, making it hard for beginners or anyone who decided to switch from another framework.

A good example is the complexity of TypeScript due to its combination with Angular. When both make a pair, it is impossible to avoid the feeling that you are dealing with a new programming language. Other various combinations like ngModules (Unique architecture), Angular decorators with assigned responsibilities require a change in developer mentality.

Loneliness in "online classroom"

The Angular learning curve can vary, and it is very individual, but synchronized and updated systematic information available to Angular developers can help a lot. And still, even with a guided step-step manual that explains that you can't avoid RxJS or that you must learn the RxJS operators by heart make no difference when there is none available to answer your questions. Therefore Angular workshops where you can discuss your difficulties with other developers can bring your Angular journey to another level.

There are multiple Angular workshops available online, but some of them either don't follow the suitable structure for beginners or don't have a tutor who can clarify and help you when you are lost. And the combination of both is a must if you want to achieve your Angular ROI after becoming a developer.

Angular Workshop series by Aliaksei Kuncevic

Angular Workshops series by Aliaksei Kuncevic, the Google Developer expert and founder of Angular Rocks podcast, tackles all the points.

When he worked on his learning program, he stayed in touch with very famous industry professionals and used his own Angular experience as a base. Apart from that, he launched a free educational Angular Rocks Podcast with Angular-related information in a very structured order to help those who can't enroll in the paid workshops.

Multiple years of experience, many Angular professional discussions, consulting assignments, and educational sessions all contributed to the three series of Angular workshops suitable for different levels. Whether you are a beginner or in the middle of your journey, you will be able to find your answers. What makes it gold is that all the paid workshops will secure professional guidance and the possibility to connect with other developers. Learning Angular in a group is fun and motivating. You have no excuse to procrastinate when inspired by other Angular enthusiasts.

During Aliaksei's previous workshop, one of the students made a great observation, which proved that a challenging process could be exciting too when you identify the right path for your Angular journey.

" I love Angular for its modular architecture, extensibility, and clear separation between logic and markup. The initial learning curve can be exhausting, but as soon you grasp the Angular basic concepts and see a clear path, you turn your developing journey into a rewarding process."

As soon as you are ready to make your first step gradually, you will progress.

All of the tree workshops can be taken independently and are suitable for different levels. Angular Getting Started Workshop can work for anyone at the beginning of his journey with Angular. While Angular First Steps and Deep Dive can work if you are already familiar with Angular.

The workshops’ structure ensures a very smooth Angular learning journey, which is why Angular Getting started workshop is free. This workshop will answer the critical question: is this framework really for you, and are you happy with the teaching style of your tutor, and you want him to guide you on your Angular journey.

Your invitation

Learning a new framework can be painful, but it is always fun when you are not alone. Stay inspired, connected, and never stop exploring. Keep your Angular developer spirit high, and remember that Angular will start paying you back when you master a rapid form of development.

The registration for the Angular workshops series by Aliaksei Kuncevic is now open here. Check it out. Everyone is welcome to join, choose the one right for you, or find out which is the right for you by taking the FREE Angular Getting Started workshop.

Thanks for reading, and ask your questions in the comments or contact me directly via linkedin or DM me on twitter

What are the benefits of using Angular?

Lex Kuncevic — Mon, 02 Aug 2021 08:37:26 +0000

Time changes everything. Angular is timeless and meets all the modern business requirements.

Angular has picked up steam in recent years, and it becomes “the cherry on the cake” for most app developers, and there are many good reasons for it. Let's see the key reasons for using Angular and the top benefits for your business if you choose to go with Angular.

First of all, let's understand what Angular is

Angular is a Javascript-based framework for developing mobile and desktop frame applications created by Google. It is used and favored by the Google Cloud platform, AdWords, and thousands of web applications built within Google. Other big names have also chosen Angular: Forbes, Delta Airlines, BMW, Samsung, Paypal, Tesla, Netflix, SpaceX.

So, why do all of these companies choose Angular?

Here are the top five main benefits:

Productivity

As an app developer, you understand the time is highly precious for each project, and surely you don't want to waste any minute of it. Once you understand the core principles of Angular building blocks and build a first Angular application using it, later you can apply the same thinking creating a new one. Your journey as an Angular developer is to create modular, performant, accessible, and maintainable applications by simply following the best practices and general guidelines that goes with them

Lego-like building blocks

Angular applications are built on logical modular principles, which means that you can simplify your life as an app developer by benefiting from dividing your code into small blocks. Those blocks can be reusable and can help to maintain immense code base health. It will help the business be more efficient, organised, cost-effective, and stay in line with any company’s KPI.

Angular ecosystem

Angular ecosystem contains all the possible fundamental tools and features you need to design and build an app. For example, libraries like Angular Material incorporate diverse components and modules, which helps save a lot of time and costs when building new applications. In addition, all of the Angular Material UI components, patterns, and performance are optimised to meet all expectations and high-quality standards.

You are not alone on your journey with Angular; by joining Angular, you are becoming a part of a friendly environment where you can become a part of the Angular community and benefit from various tools Angular ecosystem offers .

The Angular ecosystem is boundless. Its generous selection of well-maintained production-ready components and tools will make your development life simpler and painless. In addition, things such as strong typings will save you time catching errors and help you scale your projects.

Strong Typings with TypeScript

TypeScript is a first-class citizen in the Angular ecosystem. Angular itself is built with TypeScript, a Superset of Javascript, meaning that you are on the safe side and have more control over your code. With TypeScript, you can easily spot bugs and typing errors while producing understandable, efficient, and high-quality code.

Best Practices

Angular programming style is based on best practices, which are embedded with modern component-based architecture. So, what does it mean exactly? First, as a developer, you will build components and other angular building blocks that will be united into a solid application. Then, all you need to do is construct modular parts of the app, while Angular tooling will take care of everything else. Doing so eliminates unnecessary code creation. Furthermore, proper and correct preliminary setup and configuration that follow best practices will simplify your work, ensuring a lighter and more efficient development process.

When it comes to app development, it can be a challenging journey. Even though we are pretty spoiled with the various options to choose from, only the right decisions and best practices can convert our efforts into success. That is the reason why so many companies are choosing Angular.

Angular Development Tools

As mentioned earlier, the Angular ecosystem is boundless and very developed. It provides a wide range of advanced tools that can bring your development experience to an entirely new level.

Please see below the tip of the week, which can navigate you through the available options:

Last but not least, there is a very fruitful conversation available on Angular Rocks Podcast, which focuses on this matter in every detail.

The guest we hosted is Minko Gechev, the technical lead, and Angular Team DevRel Manager at Google. He is passionate about computer science, open-source frameworks, libraries, and performance tooling. His extraordinary expertise helped us cover all of the hot topics that any web developer wants to hear about, from modern dev tools for Angular developers to insightful tips and tricks that will help to improve your development processes. You can listen to the episode here

As you can see, Angular will never let you down, and by continuing to explore the Angular world, you can progress and enjoy the development process on an entirely different level.

Angular Change Detection

Lex Kuncevic — Thu, 08 Jul 2021 11:20:30 +0000

💫 The "magic glue" that connects the view and the model, keeping them both in sync.

Angular Change Detection is one of the most complex topics in software engineering and obviously in Angular as it is relying on that a lot. It can definitely be compared to the "magic glue" that connects the view and the model, keeping them both in sync".

On a broader scale, it is a mechanism built into Angular that allows Angular to decide what actions can be performed when the state of the app changes. The good news is that most of the time, developers do not have to deal with change detection manually.

However, if you find yourself caught in a loop, the only way to simplify your journey is to follow specific strategies, for example OnPush and trigger change detection manually if you need to.

There are four ways you can trigger change detection manually. Let’s look at them in detail:

tick() on **ApplicationRef **that activates change detection for the entire application by staying consistent and respectful to the strategy component of the change detection.

**detectChanges() **on ChangeDetectorRef runs change detection on a current component.

markForCheck() on ChangeDetectorRef controls change detection through the marked components where the OnPush strategy has been set.

run() **on **NgZone that allows you to execute a function inside the Angular zone. This function, and all asynchronous operations in that function, trigger change detection automatically at the correct time.

Here is a very handy tip, which can simplify your life.

If you want to learn more listen to Angular Change Detection Episode at angularrocks.com

From NGXS to NGXS Data

Lex Kuncevic — Fri, 02 Apr 2021 10:58:35 +0000

This is the second article, aka State Management Level 2 of the series Progressive State Management.

This is the third part of the Progressive State Management series aka State Management Level 2. Here I want to talk about NGXS Data and what problem it solves.

In a previous article, I show how to transition from Reactive Services to NGXS. Today I want to showcase the power of NGXS Data and how to switch from NGXS to NGXS Data if you want to.

So let's see what NGXS Data really is, what problem does it solve and how it may help you!

A lot of Angular developers use NGXS and have a great experience with that. However there is a thing called NGXS Data that probably is not as quite well known to Angular developers as NGXS. NGXS Data is an NGXS plugin that lives in NGXS Labs created by Maxim Ivanov

When you approach state management with NGXS you always end up implementing some sort of boilerplate like store actions and selectors. Boilerplate is a repetitive code that makes your codebase bigger and might lead to problems with maintainability. To keep code base in better health you may consider removing unnecessary context to get the maintainability of your code to the next level.

There is not much boilerplate in NGXS anyway but it is nice that there is a way to make NGXS boilerplate even less.

NGXS Data reduces the NGXS boilerplate by enabling you to write less code. In other words NGXS Data helps you to remove unnecessary context from your code making your code smaller. Imagine actions and selectors no longer needed. How cool is that?

You may refer to this article to see how NGXS standard code is looks like.

So let's see how the NGXS code would look like using NGXS Data plugin

Here is how our store would looks like as we do not need to create any actions or selectors:

└── state
└── counter.state.ts

Let’s see how the state class definition looks like.

The state class is now decorated with additional @StateRepository() decorator and all the functions are decorated with @DataAction() decorator.

As we do not need to dispatch anything, the component class becoming really lightweight:

The component template stays pretty much the same, the difference there is that we are calling state methods directly from the template but everything else is staying the same.

As you can see there are no changes required within a component template and it is the core principle of Progressive State Management.

Some developers like just a standard way of using NGXS and others prefer NGXS Data. So it is up to you to decide as it fully depends on your flavour, on the way you like to approach your store and on a particular use-case. The best way to find out what works best for you is to try it on practice 🙃

My name is Aliaksei Kuncevič. I am teaching Angular and Web Technology. Helping dev teams to adopt Angular in the most efficient way. GDE, member of the NGXS Core Team.

I hope you find this content helpful and if so, please help to spread this article so more people can benefit from it.

If you want to learn more Angular tips and tricks join for my newsletter at kuncevic.dev

If you want to know more about Angular subscribe for Angular Rocks podcast 🎙

You can find the source code for this article here

Angular 11 just released 🔥

Lex Kuncevic — Thu, 12 Nov 2020 07:37:34 +0000

Yes, the Angular version 11 just released as well as Angular CLI and Angular Material. I am really excited about that and I hope you too 🥳

Here is quick overview

✅ Automatic Inlining of Fonts - Angular CLI now inline fonts automatically for you to speed up the first contentful paint

✅ Component Test Harnesses - test harness now available for all Angular Material Components to simplify tests cases

✅ Improved Reporting and Logging in Angular CLI - Angular CLI console output is more easier to read and it looks more informative

✅ New Hot Module Replacement (HMR) Support - ng serve --hmr is all you need to run the HMR, no code changes required

✅ Faster Builds - faster dependencies install and faster TypeScript compilation

✅ Dropped Support for Legacy Browsers - support for IE 9, 10, and IE mobile has being removed

✅ Webpack 5 Support (experimental) - you can opt in for Webpack 5 but remember it is experimental and you need to use yarn for that.

✅ Updated Angular Roadmap - current Angular Team priorities

CHANGELOG

Angular
Angular Material

Read the official release notes here 🎉

Find out more about the future of Angular here 🚀

My name is Aliaksei Kuncevič. I am teaching Angular and Web Technology. Helping dev teams to adopt Angular in the most efficient way. GDE, member of the NGXS Core Team.

I hope you find this content helpful and if so, please help to spread this article so more people can benefit from it.

If you want to learn more Angular tips and tricks join my newsletter at kuncevic.dev

If you want to know more about Angular subscribe for Angular Rocks podcast 🎙

From Reactive Services to NGXS

Lex Kuncevic — Sun, 01 Nov 2020 22:14:20 +0000

This is the second article, aka State Management Level 2 of the series Progressive State Management.

In a previous article, I show how to implement Reactive Services using RxJS BehavoiurSubject and rx-service. Today I want to show how to transition from Reactive Services to NGXS.

Before we get started let's define what Progressive State Management is.

Progressive State Management is a technique that allows to progressively enhance the functionality of the application state in a way that won't affect the existing application data flow.

So, using Progressive State Management technique helps to design applications that are easy to migrate to a state management solution later, if you decide to do so.

There are multiple state management solutions available for Angular that you might consider at this stage, however let's see how easy it is to migrate from Reactive Services to NGXS.

When you implementing NGXS in your app it is always a good practice to keep store, actions and selectors different files following separation of concerns, here is an example:

└── state
            ├── counter.actions.ts
            ├── counter.queries.ts
            └── counter.state.ts

Let’s see how the state class definition looks like.

The state class is decorated with a @State decorator and all the functions are decorated with @Action decorator.

So here when the particular action dispatched the function associated with that action will be executed accordingly. So now let's see what is inside our counter.actions.ts file.

Actions usually defined in a dedicated file, here you can see how actions are defined:

Actions in NGXS represented by classes. Actions behave like triggers, or also they can represent the resulting event of something that has already happened. Each Action has to have a unique name and usually state functions decorated with actions. To learn more about actions you can see the documentation.

Think of actions as commands.

Now let's see what is inside counter.queries.ts.

This counter.queries.ts file contains selectors. Selects are functions that slice a specific portion of state from the global state container.

Think of selectors as queries.

Now let's see how actions gets dispatched:

In order to call the state function we have to dispatch an action associated with that function.

Action executing results with an observable. In some cases when there is no need to process the action result we can just bind the observable to the component template using AsyncPipe.

As you can see there are no changes required within a component template and it is the core principle of Progressive State Management.

My name is Aliaksei Kuncevič. I am teaching Angular and Web Technology. Helping dev teams to adopt Angular in the most efficient way. GDE, member of the NGXS Core Team.

I hope you find this content helpful and if so, please help to spread this article so more people can benefit from it.

If you want to learn more Angular tips and tricks join my newsletter at kuncevic.dev

If you want to know more about Angular subscribe for Angular Rocks podcast 🎙

You can find the source code for this article here

Reactive Services with RxJS

Lex Kuncevic — Thu, 01 Oct 2020 04:20:00 +0000

This is the first article, aka State Management Level 1 of the series Progressive State Management.

There are a lot of state management solutions that are available for Angular. However, do we always need to bring a fully-featured state management solution into our apps? Let's think about it.

Some main challenges building single-page applications we have to tackle are component communication and data flow. So that problems can be solved just by bringing the state management solution. However, state management solutions may introduce an additional level of complexity. As a result of that applications can become too hard and too expensive to maintain in the long run. So we should consider using state management solutions very carefully, based on the particular use-case scenario and remember about all the costs that come with that.

Being an Angular developer implies to be familiar with the basic concepts of RxJS. Which leads to the question of why don't we just use the powers or RxJS BehaviorSubject to solve the component communication? This way we can manage the data flow in our applications without introducing additional complexity. So, by using RxJS BehaviorSubject we can keep the solution simple, this approach works well on a small to medium scale. Let's see how we can achieve that.

Here is how reactive service might look like:

Can we improve that code? - yes, we can.

What we can do now is to reduce a bit of boilerplate in our reactive service by using an rx-service library

rx-service is a very simple library that wraps BehaviorSubject and provides utility functions on top of that. Methods like setState(), getState(), resetState() are available to manipulate the state of the BehaviorSubject. The local state exposed via the observable state$ variable.

That is how our code now look like using rx-service:

The benefit of using the rx-service library is that it abstracts BehaviorSubject so the code of your services becomes cleaner. Also, it allows you to unify the way you implement reactive services across your applications. So the code you write becomes more maintainable and easier to read.

That is how to consume the reactive service within component class:

You can introduce as many reactive services in your application as you want based on your exact use-case. In the long run, when the size and complexity of your application grow you may decide that you have enough reactive services in your application. Therefore, at this stage you may just replace reactive services with a proper state management solution of your choice.

My name is Aliaksei Kuncevič. I am teaching Angular and Web Technology. Helping dev teams to adopt Angular in the most efficient way. GDE, member of the NGXS Core Team.

I hope you find this content helpful and if so, please help to spread this article so more people can benefit from it.

If you want to learn more Angular tips and tricks join my newsletter at kuncevic.dev

If you want to know more about Angular subscribe for Angular Rocks podcast 🎙

You can find the source code for this article here

11 Reasons why you should use NGXS as State Management in your Angular apps

Lex Kuncevic — Sat, 01 Aug 2020 12:32:09 +0000

Developers tend to use state management solutions to solve some common problems developing modern single page applications. Building a modern web application using Angular you might not need to opt-in for a state management solution right away (it depends) but when the day comes NGXS is your best choice and here is why.

Why you should choose NGXS:

Bulletproofed: NGXS was built back in Feb 2018. Since then, for many years, it has been chosen by many dev teams and companies as a state management solution for their Angular apps. Now there are 3.4+ million npm downloads to date!
Backed by an awesome team: NGXS is an open source project maintained by a team of great software engineers from across the globe with a combined experience of 80+ years in software development.
Angular way: NGXS written by Angular devs and for Angular devs. As a result, your store-related code uses a more familiar Angular approach that leverages dependency injection, decorators, etc.
Great Features: There are many awesome features that NGXS offers: component communication, state operators, selectors and much more.
Plugins: NGXS has a plugin system built-in - it is similar to Redux's meta reducers. You can use existing plugins to extend the functionality on top of your store or you can build your own plugin. Plugins that NGXS offering you: Logger, Devtools, Storage, Forms, Web Socket, Router and more!
Less Boilerplate: NGXS was originally invented in response to the complexity and amount of boilerplate present in other state management solutions.
Backwards Compatibility: NGXS team very strongly stands for backwards compatibility so by migrating to a new version of NGXS you can be assured that your codebase won’t require significant changes as part of the upgrade.
Consistency and Maintainability: In practice it is much easier to maintain applications that build with the same fashion. When you use NGXS it gives your code a place to live and common patterns will emerge that will make for a much more maintainable codebase.
Documentation: NGXS has a great documentation at NGXS.io in addition to that you can find some blog posts about NGXS on medium blog.
Community: The NGXS community is strong, you can join NGXS slack channel if you have any questions or if you want to discuss anything or just to say hello.
NGXS labs: NGXS labs is an organization on github - the place to test out the new ideas and to play around and experiment with new cool features and new plugins that are not yet under the main NGXS organisation. Here is the list of the additional features and plugins currently available at NGXS labs:

      - Data - NGXS Persistence API
      - Emitter - provides the opportunity to feel free from actions
      - Immer adapter - declarative state mutations
      - Dispatch decorator - provide separation of concern between the state management and the view
      - Select snapshot - decorator that allows to get a snapshot of the state
      - Async storage plugin - async Storage Plugin
      - Entity state - entity adapter
      - Actions executing - notifies if action is being executed
      - Attach action - attaching independent, pure and easy to test Action Handlers to NGXS State
      - Firestore plugin - firestore plugin for NGXS

So as you can see there are lots of reasons why you may want to consider NGXS as a state management solution for your Angular applications. To get started check up the documentation at ngxs.io and if you have any questions you can join the slack channel to discuss or just comment below.

My name is Aliaksei Kuncevič. I am teaching Angular and Web Technology. Helping dev teams to adopt Angular in the most efficient way. GDE, member of the NGXS Core Team.

I hope you find this content helpful and if so, please help to spread this article so more people can benefit from it.

If you want to learn more Angular tips and tricks join my newsletter at kuncevic.dev

If you want to know more about Angular subscribe for Angular Rocks podcast 🎙