Behind The Code Magazine #4 by ngPoland

About the magazine The magazine is inspired by NG Poland Behind the Code Magazine. The founder of BtCM is Dariusz Kalbarczyk - NG Poland and JS Poland Conference organizer. The idea of a magazine is to discover the human factor of coding. "What we achieve as humans depends on our attitude, hard work and being open to new challenges. The goal of BTCM is to bring out the stories of people from the world of technology and show their true, human side. Behind ideas stands technology, and behind technology stand people. People who become role models and set a standard for making the world a better place." Dariusz Kalbarczyk BtCM Founder, NG Poland Conference Organizer

"We believe that people create technology and the community is a huge part of every conference. Read about Angular authorities from all over the world, who are absolutely positive and full of passion. Learn. Inspire. Enjoy!" Marta WiĹ&#x203A;niewska BtCM Editor, Angular Developer

Don't skip our next conference NG Poland and JS Poland happening on 19th November 2019!

The main Angular event in the Nordics. And the only travelling Angular conference in the world.

May 27-28th 2019 Copenhagen, Denmark

Join sword training and be a Viking! A conference to nurture local dev community (not only bring famous speakers) ORGANIZERS

What makes ngVikings unique conference?

Passion for tech We are as passionate as they come. We love to learn and tell others about our ndings, in different mediums

Community spirit made by community organizers that care about community well being rst and pro t last

Diversity & Inclusion focus in addition to Scholarship program & ngGirls, there was a full day TypeScript workshop for Hack Your Future ((link: https://www.hackyourfuture.dk/) hackyourfuture.dk) and also students had their own booth at the conference to demo their projects

Green conference Healthy organic food, no platic bottles or paper cups, recyclable lanyards

TABLE OF CONTENTS

INTERVIEWS

Meet passionate about Angular Dan Wahlin

Kenneth Rohde Christiansen

Wassim Chegham

Samantha Brennan

Revital Friedman

Bonnie Brennan

Fabriece Sumuni

Stefan Baumgartner

Laurent Duveau

Natalia Venditto

Valentin Kononov

Lars Gyrup Brink Nielsen

BEHIND THE CODE MAGAZINE |

26 28

NgVikings 2019

TABLE OF CONTENTS

ARTICLES Read and code

Optimizing Angular application load performance

Ville Lahdenvuo

How to send Errors into Slack in Angular

Michael KarÃ©n

BEHIND THE CODE MAGAZINE

INTERVIEW Dan Wahlin President - Wahlin Consulting

I run a training, consulting, and mentoring company called Wahlin Consulting located in Chandler, Arizona in the United States. Most of my time is spent onsite with clients helping them get up-tospeed on various technologies or helping them architect new solutions.

DanWahlin

I really enjoy full-stack development and working with SPA frameworks/libraries, back-end technologies (Node.js, .NET Core), as well as Azure, Docker, and Kubernetes. In my free time I enjoy writing and recording music, playing sports, watching movies, being outdoors, and trying to keep up with my wife and kids at the gym (they're all in great shape :-)). Did you start your career as a developer? What made you start programming? When I was 14 my grandpa bought us an Apple IIc for Christmas and that was my rst "real" experience with a computer. I mainly used it to play games, but did play around with a little scripting. I had a high school class that covered BASIC (with the good old TRS-80 computers) and really enjoyed it but never did much programming after that. In college I did bio-chemistry and economics since I planned to go to medical school and become a surgeon. But, an engineering friend of mine took me to their computer lab one day and I experienced the Internet for the rst time (it was very new back then). I was hooked and dove into HTML and Perl at that point. I ended up getting a job after college that allowed me to work with the Web some for online stock trading, but only a little bit. But, work and learning I did on my own combined with my job experience gave me enough experience to get a full-time programming job running a company's intranet and internet sites. Back then I worked with Java, then "classic" ASP and VBScript, did some Visual Basic, a little C++, jumped into .NET, and the rest is history. After 6 years working in the eld as a programmer I decided to start my own company and have done that ever since. 10

BEHIND THE CODE MAGAZINE

ngViking 2019

INTERVIEW

Dan Wahlin

const success = ['always', 'keep', 'learning']; by Dan Wahlin

Why have you started programming in Angular? I've worked with the Web since the 90s and when KnockoutJS came out it was a new "revolution" as far as getting data in and out of screens. AngularJS added to that with all of the additional functionality it provided in addition to data binding. Angular was the next progression and since I already had AngularJS experience as well as a framework background (Java and .NET) it made a lot of sense and just "felt right" when it came to front-end development.

What do you like the most in Angular? The "framework" feel and functionality it provides as well as the productivity boost. Angular provides a lot of different "Lego" blocks in the framework that I can snap together to build powerful apps quickly and easily.

What do you like the most in tech conferences? Meeting new people and hearing about what they're working on, challenges they're facing, and problems they've solved. I learn a lot by listening to others and hearing more about their experiences.

Who or what inspired you to improve yourself? My parents always encouraged me to succeed in anything I did and improve myself whether it was school, sports, or work. I'm a pretty driven person and I think that comes from their encouragement as I was growing up.

What do you do in your free time? I enjoy writing/recording music, going to movies, being outdoors, watching/playing various sports, and most importantly....hanging out with my family.

ngVikings 2019

BEHIND THE CODE MAGAZINE

INTERVIEW Kenneth Rohde Christiansen Web Platform Architect at Intel

Hi there! My name is Kenneth and I am a Web Platform Engineer at Intel. In my day to day job, I work on Chrome and web standards, trying to move the web forward. kennethrohde

At Intel we believe in the web, not just for web sites, but also as an application platform. This is one of the reasons why I have been editing the web app manifest spec (part of the Progressive Web App story) and is now involved with the Google capability project, Project Fugu. Did you start your career as a developer? What made you start programming? I am not the born programmer, actually my interest was in technology and computers, mostly as a user. My rst PC ran MS-DOS and later I was playing around with Windows, OS/2 and BeOS, until people at school introduced me to Linux. I got really hooked and loved toying around. The terminal was so powerful so I felt powerful too... but I hated the UX of Linux and got involved with the GNOME project, especially around internationalization and UX. Through my work I ended up writing intltools and working with Darin Adler and Maciej Stachowiak, who are known for later being involved with starting the WebKit project and Safari. After high school, I didn't know what I wanted to do, but I loved math and physics, but with my interest in computers, I decided to join the Computer Science course. Coincidences brought to me Brazil where we had a conference called Bossa Conference. An old friend of mine visited as a speaker, speaking about GtkWebKit. One of the bosses assumed that I was a WebKit expect and I got the change to work on WebKit, creating the WebKit-EFL port later used in Samsung TVs. This also got me to work with Darin and Maciej again! 12

BEHIND THE CODE MAGAZINE

ngViking 2019

INTERVIEW Kenneth Rohde Christiansen

My employer Nokia bought Trolltech (the makers of Qt) and I joined the QtWebKit team and worked on mobile adaptations. The result was that I ended up creating the rst WebKit2 multiprocess mobile browser for the Nokia N9 - just before Nokia went all Windows and I joined Intel Corporation. Since then, I have worked on the web, for now more than 10 years!

Why have you started programming in Angular? As a browser engineer, I believe that I need to know how to write for the platform, which means also trying all the different toolkits, including Angular and others. That is the best way that I know how to improve the platform for developers

What do you like the most in Angular? The new focus on size and speed, as well as it is adopting newer web standards like web components

What do you like the most in tech conferences? Networking! Meeting developers and tech partners and discussing the future of the web - I also enjoy meeting many of the friends that I have made over the years

Who or what inspired you to improve yourself? That would be myself - I set out a goal and then I don't stop until I deliver - I am also quite the perfectionist, which can be good and bad - but I try to follow the saying "perfect is the enemy of good enough", though it can be quite hard at times :-)

What do you do in your free time? What is free time? Seriously, I spend a lot of time on my work. For instance, I am an elected member of the W3C Technical Architecture Group which means a lot of additional meetings and work, and then there are all the conferences which also take up a lot of my spare time! When I do get some time off, I mostly spend it on house improvements and working in the garden - or just drinking some beers with friends

ngVikings 2019

BEHIND THE CODE MAGAZINE

INTERVIEW Wassim Chegham Senior Cloud Advocate at Microsoft

I'm Wassim, a member on the Angular team and a Senior Developer Advocate at Microsoft. I am the author of a bunch of open source projects such as xlayers.dev and ngx.tools. I am also a GDE for the Angular team, the Google Assistant and the GCP teams at Google. I am also a member and an advocate of the Node.js Foundation, a former member of the Angular Universal core team.

manekinekko

What made you start programming? I started my career in 2012 as an intern working on JavaScript mobile frameworks. However, I started programming and hacking on electronics for fun since 2003 using Python and JavaScript. Why have you started programming in Angular? The rst time I came across the AngularJS framework, it was back at the end of 2011, the 1st version of Angular was called AngularJS. Back then, at work we needed a more robust framework to build up our next technical stack for our “enterprise-y” projects. Our previous tech stack was built upon Backbone.js and a bunch of jQuery plugins. Don’t get me wrong, that stack was doing an incredible job. I personally was quite happy with that; It just couldn’t scale up while the team was growing. It also was missing some core components, like a solid unit testing framework and a well-de ned build and packaging process. Then, I discovered AngularJS.

BEHIND THE CODE MAGAZINE

ngVikings 2019

INTERVIEW

Wassim Chegham

Learn. Think. Build. Share. Enjoy. by Wassim Chegham

What do you like the most in Angular? I am glad and happy to be part of this amazing community. Working passionately to make Angular even more awesome! Trying to help and learn from my fellow developers as much as I can. My favorite feature in Angular is Community.

What do you like the most in tech conferences? I primarily come to tech conference to chat and hangout with the attendees and my other friends from the community.

Who or what inspired you to improve yourself? I am fortunate enough to have met a couple of people (former work colleagues) who inspired me and had been playing an important role during my professional career.

What do you do in your free time? In my free time I like to hack on projects for my house. I am also trying to learn EDM music and also drawing sketches ^^

ngVikings 2019

BEHIND THE CODE MAGAZINE

INTERVIEW Samantha Brennan Developer

I am currently working on a visual Angular course, Angular for the Visual Learner! TheLittlestDev

Did you start your career as a developer? What made you start programming? I got grounded when I was 8 years old and my mom (Bonnie Brennan) made me make a website in HTML & CSS to get my privileges back LOL Why have you started programming in Angular? I got a job writing Angular!

What do you like the most in Angular? The community ‫ݤ‬

What do you like the most in tech conferences? The people!!!

Who or what inspired you to improve yourself? My amazing beautiful mother Bonnie Brennan

What do you do in your free time? I’m learning 3D animation to learn and teach Angular to dyslexics.

BEHIND THE CODE MAGAZINE

ngViking 2019

INTERVIEW Revital Friedman Front end developer in angular

public JustDoIt(something) {} by Revital Friedman

RevitalFriedman

Did you start your career as a developer? What made you start programming? Technological unit in the army Why have you started programming in Angular? Love it:)

What do you like the most in Angular? The renewal and community:)

What do you like the most in tech conferences? The people

Who or what inspired you to improve yourself? The conferences

What do you do in your free time? Sport and Extreme

ngViking 2019

BEHIND THE CODE MAGAZINE

INTERVIEW Bonnie Brennan Angular GDE

Angular GDE/Architect, Angular Air Panelist, Founder of ngHouston, Parent Component of @thelittlestdev bonnster75

Did you start your career as a developer? What made you start programming? I started my career as an underpaid admin for the rst 10 years, moved into coding to earn more money. Why have you started programming in Angular? They had me at ng-repeat! <3

What do you like the most in Angular? De nitely the community, also the framework itself is beautiful.

What do you like the most in tech conferences? De nitely the community!

Who or what inspired you to improve yourself? I did it for my kids <3

What do you do in your free time? Yoga 18

BEHIND THE CODE MAGAZINE

ngViking 2019

INTERVIEW Fabriece Sumuni CTO at K30 group AS

I'm Fabriece Sumuni and I'm the co-founder and CTO of a company called K30 based in Stavanger in the beautiful west coast of Norway. sfabriece What made you start programming? The ability to create something from nothing drew me to it, but I also studied computer science. Why have you started programming in Angular? In the beggining, it was the abstraction angular provided for me, then it was the fact that it was opinionated and that it allowed us to build large web apps with bigger teams and at last the community that came with it.

What do you like the most in Angular? The fact that everything works well together and that it keeps getting better in all important metrics with each release. The community is unique in it's ability to make you feel welcome and at home.

What do you like the most in tech conferences? Learning, giving talks, meeting old friends and making new ones.

Who or what inspired you to improve yourself? The people I look up to in all facets of life, be it Elon musk on one end to my mother on the other. People like Igor, Minko and lately Samantha Brennan who is teaching abstract angular concepts to those living with dyslexia. The list goes on and on.

What do you do in your free time? I play and coach football(soccer), learn new skills and being with my friends. I'm also an aviation enthusiast and I hope to get my pilot license soon. ngViking 2019

BEHIND THE CODE MAGAZINE

INTERVIEW Stefan Baumgartner Internet Batman

ddprrt

I'm Stefan, and I'm an engineer at Dynatrace. I've been roaming the web for a couple of years now and love crafting great apps and pages. Currently, I love being involved in design systems, component libraries and everything related to the JAMStack architecture. I also organise ScriptConf - A conference (not only) about JavaScript (https://scriptconf.org). Rather than focussing on JavaScript itself, we focus on what people create with JavaScript. If you want to see a conference that's different, feel free to join us! Did you start your career as a developer? What made you start programming? I guess it started when I tried to recreate Pacman in QuickBasic. Typing off a 2500 lines of code listing from a computer magazine. Only to nd out QuickBasic and QBasic are not the same thing! At the age of 15 I created my rst website, that was in 1997. I followed this passion for web development through the years in different roles, and I'm quite happy where I ended up.

BEHIND THE CODE MAGAZINE

ngViking 2019

INTERVIEW

Stefan Baumgartner

#life { display: awesome; } by Stefan Baumgartner Why have you started programming in Angular? Back when I was doing performance consulting, one of my clients wanted to speed up their Angular applications. Without any prior knowledge we broke up their huge app into small pieces, introduced Universal rendering and made sure that if the app itself is not faster, it at least feels faster. That was my rst foray into the world of Angular.

What do you like the most in Angular? That might sound cheesy, but I think it's the community. The people in the Angular space are super nice and helpful. And the few Angular conferences I've been attending just con rmed this feeling.

What do you like the most in tech conferences? Talk-wise, I like it when people show something that's totally outside the box. This are the talks where I learn most of it. Next to talks, I think the hallway track is one of the most important parts of a conference. Long breaks, enough room to meet and chat.

Who or what inspired you to improve yourself? For 8 years in a row I've been attending the Beyond Tellerrand conferences. It's full of web developers, but the talks are about design, typography, doodling and storytelling. I learn so much and get so many good ideas from seeing things that are not in my usual lter bubble.

What do you do in your free time? Organising meetups and conferences, cooking, hiking, and spending time with my family. I also meet once a week with my friends from Working Draft (https://workingdraft.de) for a podcast on all things web.

ngViking 2019

BEHIND THE CODE MAGAZINE

INTERVIEW Laurent Duveau Most Proli c Angular Workshop Trainer Worldwide

LaurentDuveau

I am a full time Angular Workshop Trainer [www.angularacademy.ca], I teach mostly in Canada, sometimes in Europe and the Caribbeans as well. I've done my Angular Workshop 152x already, I do believe it's a world record! I really love to see the impact I have on development teams looking at how they feel before/after the workshop! Did you start your career as a developer? What made you start programming? Passionate about web technologies since forever, I built my rst website in 1996... yes, I'm a veteran of the First Browser War! At that time I wanted to build a Star Wars website, it was optimized for IE3 and Netscape 4... I have never stopped since then!

BEHIND THE CODE MAGAZINE

ngViking 2019

INTERVIEW

Laurent Duveau

while(passion) { this.keepPushing(tech); } by Laurent Duveau

Why have you started programming in Angular? Someone asked me to teach him Angular... so I had to learn it!

What do you like the most in Angular? 1. It's a Framework (and even a platform) it brings most of what I need to build a business app so I can focus on the real problems to solve 2. TypeScript, I will never go back to classic Js ;-)

What do you like the most in tech conferences? Feeling inspired to try new things, talking to people about their projects and how they use technologies.

Who or what inspired you to improve yourself? I always look at what other trainers are doing so I can improve myself.

What do you do in your free time? Golf, gardening, family time.

ngVikings 2019

BEHIND THE CODE MAGAZINE

INTERVIEW Valentin Kononov Technical Lead

I’m continuously evolving software developer and writer. I do coding, writing about code and technology, talking about code quality, architecture and coding practices, traveling and write about travels. I’m a family guy, I don’t like long night parties, I rest with my family at home or when we get out of the city. I believe that knowledge of fundamental aspects is more important than memorizing every little detail of new libraries.

ValentinKononov

I’m agile adept, but I appreciate the original understanding of agile by Rob Martin and Martin Fowler manifesto.

Did you start your career as a developer? What made you start programming? When I was at school, about 12-14 years old, I bought a book about programming in Visual Basic. I liked it so much, that I completed all the exercises in several days and bought another book. Later I was lucky enough to relocate to another city and study in university at the faculty of computer science. In 20 I got a job as a junior .NET software developer. These decisions directed my life and I’m happy about it. I’m a practical kind of guys, I learn something what I actually can apply. When I was a kid, I read a lot of books. It was very natural to me how the book describes something. And later programming became something similar to me in this meaning. The code describes a machine what to do. The better story created with code, better results machine will achieve. It’s amazing!

BEHIND THE CODE MAGAZINE

ngViking 2019

INTERVIEW

Valentin Kononov

if (myself.applied(technology, project).success === true) { myself.writeAboutIt(medium); myself.talkAboutIt(conference); } by Valentin Kononov

Why have you started programming in Angular? I was always interested in web development and had JavaScript experience in several projects. But my mindset refused to get used to it. Being a .NET developer for a long time changed the way I think and create program code because of Types and Compilation. But Angular and TypeScript practically showed me the road to web development. I have Types and kind of Compilation again, not to mention a solid framework with code structure.

What do you like the most in Angular? The community, rapid progress of the framework, options to tune it for performanceâ&#x20AC;Ś But the biggest appreciation is given to the way how it is thought through in a lot of meaningful details. Routing, Components, Dependency Injection. I like DI in Angular a lot - easy and simple, yet powerful!

What do you like the most in tech conferences? I like the ability to share your story of learning something, at the same time help others to understand cool facts about technology and architecture. I like the possibility to inspire people and get inspired! And maybe even more than that I like the new friends I make there, passionate about something interesting, meaningful and trying to put energy into important things.

Who or what inspired you to improve yourself? I get inspired by people who mean something to me. A couple of years ago I visited the workshop of Dino Esposito, whose books about ASP.NET I read when I was 20. Soon after that, I did my rst conference talk about architecture pattern. This is amazing how people can share energy and in uence each other. And of course, my wife encourages and support me a lot in new endeavors.

What do you do in your free time? I love traveling, visiting other counties and all about that. Every time I try to feel the city breath, understand the culture of locals. Apart from long journeys, I like car traveling, it gives the possibility to explore places of nature outside of the cities. When the weather is good enough, we go outside the city together with my wife, daughters, and dog. ngVikings 2019

BEHIND THE CODE MAGAZINE

INTERVIEW Natalia Venditto Frontend Architect - Senior Tech Lead

an biacreativa

I am a Web Software Developer, originally from South America. I work as a Tech Lead and Frontend Architect at Netcentric. I am also part of Women Techmakers in Barcelona, and contribute to OSS. Did you start your career as a developer? What made you start programming? I was a Graphic Designer who slowly started getting more and more interested in the digital world and the web, and suddenly transitioned to web designer (back in 2004 when it was in its infancy!) And then from there I started working with Flash and programming in ActionScript. Before I knew it I was developing full blown websites.

BEHIND THE CODE MAGAZINE

ngViking 2019

INTERVIEW

Natalia Venditto

if(live) { stayHungry(always); } by Natalia Venditto

Why have you started programming in Angular? I work in enterprise scale software projects. I wanted a solution that was robust and opinionated about patterns and technologies, because I feel it's the most suitable to work at large scale with highly distributed teams. That's Angular!

What do you like the most in Angular? I heard recently that Angular has a very steep learning curve, but after you nally learn it, everything becomes a "minor" issue. I really liked that. I feel it is that way. I love how structured everything is. I love how coherent it is. It is de nitely my favorite framework!

What do you like the most in tech conferences? Networking! I love being around like minded people and share ideas, exactly as we do online, but face to face. I've made great friends in conferences. You establish a great connection with other speakers and people who attend your talks and then good things happen! Before you know you're planning new events and spreading knowledge more and more.

Who or what inspired you to improve yourself? My family, rst. I want to be the best and a role model for them. But also the community. The idea of working as a team at large scale. Both at my current employer, Netcentric, where I work for the past 5 years. We are like a family and we really challenge each other to become better and grow together.

What do you do in your free time? I spend it completely away from computers and the internet. I travel with my family. Travelling is what I love the most. Especially in Summer. I love warm weather.

ngVikings 2019

BEHIND THE CODE MAGAZINE

INTERVIEW Lars Gyrup Brink Nielsen Angular In Depth Writer, Tech Speaker, OSS Contributor

LayZeeDK

I'm a 32 year old Dane with a burning passion for front-end development and software architecture. I enjoy creating environments that both new and experienced developers can thrive in. I spend my spare time reading, writing and speaking in the Angular community. I like introducing, naming and describing techniques and software patterns for Angular. I always try to include theory, simple code examples and some sort of visual guidance in my work to keep it relevant for all types of learners. Did you start your career as a developer? What made you start programming? I have had a lot of full-time jobs before developing software. For example mushroom picking, manufacturing furniture, and commercial shing. I just always liked computers. In my early teens, I got excited by HTML. I graduated in Compuer Science and decided that web was the platform worth counting on.

BEHIND THE CODE MAGAZINE

ngViking 2019

INTERVIEW

Lars Gyrup Brink Nielsen

repeat tryHard until youSucceed by Lars Gyrup Brink Nielsen

Why have you started programming in Angular? Angular was a requirement for a job. I previously chose AngularJS. Early in my career, I discarded AngularJS because it was more dif cult to learn than the competition. Angular is my 7th web app framework but also my favorite one.

What do you like the most in Angular? The community, the rapid progress in several areas of the framework. The option to tune it for performance.

What do you like the most in tech conferences? ngVikings was my rst conference. I enjoyed it very much. The organizers are an incredible group of people. The MCs were outstanding. The volunteers did an awesome job.

Who or what inspired you to improve yourself? I’m inspired by Max Koretskyi, Douglas Crockford, Dave M. Bush, Harry Roberts, Robert Martin, and Martin Fowler. I’ve been pacing myself to keep learning ever since graduating in 2013. I’m my own toughest critic.

What do you do in your free time? Family time, professional networking, experimenting with Angular techniques and upcoming changes to the framework.

ngVikings 2019

BEHIND THE CODE MAGAZINE

ARTICLE

Optimizing Angular application load performance by Ville Lahdenvuo Optimizing performance is a complex issue. You are taught that premature optimization is bad and it’s also something hard to sell to your Product Owner since many have an “if it works, don’t x it” mentality. Here’s how we are tackling the issue.

We’re currently working on a new E-Commerce solution for Grano, aiming to provide a better customer experience by modernizing our platform, improving automation and integration to our production services. We’re working with an enterprise-level product and environment: Node.js, Angular, Redux, AWS accompanied with high code quality and modern development standards. Luckily our Product Owner understands the importance of performance and many big companies are making great points about performance and have done actual research to measure its importance: "We found that 53% of mobile site visits are abandoned if pages take longer than 3 seconds to load." — DoubleClick by Google So armed with these results and the wish to improve we have been working on including performance tickets to our sprints instead of leaving them at the end of the backlog to rot. To understand our challenges and issues you should know a bit about our application and how it works. It’s not the same to run Apache or Nginx vs. using a distributed CDN to deliver your application. You could be using serverside rendering or doing everything in the browser.

BEHIND THE CODE MAGAZINE

ngViking 2019

ARTICLE

Ville Lahdenvuo

Our service runs on Amazon Web Services and we take advantage of many tools that AWS offers. The Grano Shop application consists of a Node.js API running on EC2, Angular storefront application hosted on S3 and CloudFront, Angular admin interface hosted the same way, several AWS Lambda functions and bunch of other services.

Measuring You cannot improve something if you don’t measure it rst. Sure you can make something feel faster, but to actually know you’re making the right changes is crucial. For a long time we were running Google’s Lighthouse tool manually every now and then, but to get proper measurements the best thing is to automate it. To do this we utilised our existing continuous integration infrastructure and added a step called “audit” that runs every time we deploy to production and generate a pretty report like this:

Lighthouse report summary for Grano Shop

An important note though is that this report is using mobile device emulation and network throttling. We chose to track the mobile performance to not forget about that small percentage of users and ensure the desktop performance will be even better. "Our desktop performance score is 92 that counts for 75 % of our visits." Another tool we use to ght the bloat is Bundlesize. Also check out BundleWatch which seems more active now. It allows us to track the size of our code bundles and warn us if we add unexpected bloat.

PR check telling that bundle size is under control

ngVikings 2019

BEHIND THE CODE MAGAZINE

Ville Lahdenvuo

Last but not least is the Webpack Bundle Analyzer, which gives a helpful breakdown about the anatomy of your bundles. It allows you to easily see what is taking up all those precious bytes in a visual manner. It really helps to nd out what to remove or lazy load to decrease the initial page load time.

Webpack Bundle Analyzer report

This tool helped us notice an embarrassing mistake â&#x20AC;&#x201D; for some reason we were including our poly lls in both the main and poly ll bundles and therefore downloading them twice for no reason!

Optimization This section is divided into different optimization techniques and tricks we have found and exploited. Some are hopefully useful to you but some are very speci c to our application so they might not directly help you, but it might give you some ideas that you can apply to your problems. Once we started optimizing a funny thing happened. Our performance score actually went down at rst! In the rst reports we saw that some audits failed to complete because they timed out! That is, once we started making it faster the audits started working and lowered our score. 32

BEHIND THE CODE MAGAZINE

ngViking 2019

ARTICLE

Ville Lahdenvuo

With Angular the hashing is a simple con guration option, but keep in mind that when using the Angular CLI the assets folder is copied as-is so keep your assets in the src folder preferably next to the component that requires it to get it hashed and therefore cached properly. For example we had some vector images that were referenced in the components and once we moved them in the component folders they were hashed properly during the build process.

Lazy Loading Talking about Angular and the CLI make sure to enable lazy loading and lazy load your routes, that way the initial payload stays smaller as your application grows more and more complex and full of features. Since the generated bundles are hashed they are cached properly thanks to the cache headers from the earlier section.

Resource Hints Another useful browser feature is the Resource Hints. It allows you to use HTTP headers or HTML link tags to tell the browser ahead of time that it will need a speci c resource. The most common example is web fonts. In the index.html renderer Lambda we load a list of web font les from S3 and add a preload tag for each to tell the browser to download the fonts as soon as it can before downloading and parsing the CSS. This allows the browser to render the text as soon as the CSS has been processed instead of waiting for the fonts to load. Note that web fonts always require the crossorigin attribute! "One interesting case in which this applies even if the fetch is not crossorigin is font les. Because of various reasons, these have to be fetched using anonymous mode CORS (see Font fetching requirements if you are interested in all the details)." â&#x20AC;&#x201D; MDN

Here you can see that the fonts are downloaded immediately and the hashed resources are cached.

ngVikings 2019

BEHIND THE CODE MAGAZINE

Ville Lahdenvuo

Icons We use Font Awesome icons on our site and we were using the version 4 using a web font. To reduce the load time we upgraded to Font Awesome 5 and started using the library provided for Angular to load the icons. This way our build system only embeds the required icons into our JavaScript bundle instead of making it download all icons like we did earlier by using the web font.

Future ideas As you saw in the Lighthouse report we still have plenty of work to do and we have some ideas we want to look into: -Better lazy loading: We can lazy load more. We added lazy loading afterwards , that is, we didn’t have it when we started building the application and now we have to organize the application and move things around to be more lazy. -Using a Service worker: A servicer worker won’t help with the initial page load, but with it you can control the browser cache totally and make sure the application works of ine, in our case we could allow you to browse products and prepare your order even if you’re of ine. -Smaller Poly lls: We are currently loading poly lls to support IE11. However most of our users use modern browsers that have built-in support for the things we need. There are ways to download only necessary poly lls for example checking the browser user agent string. There are even services like Poly ll.io that do it for you.

BEHIND THE CODE MAGAZINE

ngViking 2019

ARTICLE

Ville Lahdenvuo

The takeaway Performance is an uphill battle, but one that is always worth it. Investing in performance and using the right tools can make a big difference in the user experience. -Keep performance in mind when developing â&#x20AC;&#x201D; perhaps you donâ&#x20AC;&#x2122;t need all those 5000 npm modules -Use the right tooling and measure everything -Take advantage of new browser features such as HTTP2 and Resource Hints

Written by Ville Lahdenvuo

tuhoojabotti

Full link to the article: https://medium.com/grano/optimizing-angular-application-loadperformance-6bb796b1a7c1

ngVikings 2019

BEHIND THE CODE MAGAZINE

ARTICLE

How to send Errors into Slack in Angular by Michael Karén In this article, I will create a beautiful message and send it to a Slack channel. I will also show the steps needed to get your channel running. If you are using Slack at your company, then the chances are that you have the Slack client running on your desktop and phone. Having your errors more visible in a Slack channel will make it easier to nd and notice them. This solution is best suited in a smaller internal tool. When solutions grow, they need more advanced tooling for error tracking. But getting your errors to Slack is an easy way to get started. If you are not using Slack, you could convert the ideas behind this article to your tooling. I’m using Angular, but it could as well have been vanilla JavaScript or any other framework.

What is Slack? The name is an acronym for “Searchable Log of All Conversation and Knowledge.” Basically, it is a communications tool for groups where you create a workspace with multiple channels. Every channel can be public or private with its own topic. There also are lots of different apps and integrations. You can, for example, have your builds in one channel and deploys in another by sending data to Slack from your chosen tool.

BEHIND THE CODE MAGAZINE

ngViking 2019

ARTICLE

Michael KarĂŠn

Why use Slack for Errors? If your company is using Slack as a communication tool, then it makes sense to integrate it with your tooling. You can, for example, record your failing builds and deploys there. And why not then also log your errors there? Since you probably already have Slack open on your desktop and maybe on your phone as well, all these logs will be more available to people. Having Slack open on all devices makes it easier to notice when something bad is happening. Every solution can have its Slack channel for errors. You can also differentiate for different environments like test and production. Errors can also be customized as needed as we will see later in this article.

Webhook To be able to test our code we need to have a Slack channel where to send the errors. Before we start coding, we need an address where to send our errors. For this, we need a Slack app with a Webhook. This is the way we add tooling to our workspace. Incoming Webhooks are a simple way to post messages from apps into Slack. Creating an Incoming Webhook gives you a unique URL to which you send a JSON payload with the message text and some options. 1. Create a Slack app (if you donâ&#x20AC;&#x2122;t already have one). 2. Enable Incoming Webhooks from the settings page. 3. After the settings page refreshes, click Add New Webhook to Workspace. 4. Pick a channel that the app will post to, then click Authorize. 5. Use your Incoming Webhook URL to post a message to Slack.

ngVikings 2019

BEHIND THE CODE MAGAZINE

Michael Karén

The Application OK, now that we have all the Slack infrastructure in place we can start coding our Angular application. The app is just a button that sends Errors to the Slack channel. Remember to add HttpClientModule to app.module imports to be able to use HttpClient to post the errors to Slack. The Slack service needs to take care of three things before it can post the errors. 1. Set the Webhook 2. De ne a Slack message 3. Set content-type header We have already got the Webhook URL so now its time to use it. const webHook = 'your-webhook-url';

Sending the Message Messages are the basic building block of all conversations on Slack. The minimum viable message consists of the channel and a text. const message = { channel: '#angular', text: error.message } We also need to set the content-type header, or we will run into a CORS error. Text/HTML, which is the default, is not accepted by Slack. const options = { headers: new HttpHeaders( { 'Content-Type': 'application/x-www-form-urlencoded' } ) }; Now we have all the three parts and are ready to post to Slack. this.http.post(webHook, message, options).subscribe(); When we click the button, an error appears in the Slack channel! That’s great, but this message is not giving us enough information. Let’s see what we can do to improve it. 38

BEHIND THE CODE MAGAZINE

ngViking 2019

ARTICLE

Michael Karén

Message Attachments We can add some more context to the message by adding an attachment to it. I’m not going into detail on styling messages, but there is excellent info in the Slack API documentation. attachments: [{ author_name: window.location.href, color: 'danger', title: 'Trace', text: error.stack }] Now the message looks better. I think this would be enough to get us started on locating the bug.

Too Many Errors What if you run into a looping type of situation that throws bugs at you and just won't stop. It will ood your channel pretty quickly. For some protection, we can save the last error that we sent to Slack and compare the new bug to it. If it has the same message and attachments then we don’t send it.

Security You will be exposing your Webhook client side. Anyone could then get hold of it and post to it. Therefore a better solution could be rst to send the errors to a secure API. And if errors occur server side, then you should consider not making a roundtrip but send them to Slack straight away. In other words, the solution presented here is not for your enterprise solution where security is paramount. It is more of an example of how you quickly can get started.

Hints -Set the correct content-type header. -Exclude the Authorization header from Slack calls. -Keep error channels private. -Consider security by sending the errors server side. ngVikings 2019

BEHIND THE CODE MAGAZINE

Other use cases There might be other use cases better suited than error logging. You could, for example, send a notice everytime you sell a particular item in your webshop. Or when a new feature is being used. Please comment if you have any good ideas.

Conclusion Slack is an excellent way to centralize errors easily. If you already have a company workspace in Slack, it is easy to start logging your errors to private channels. When your application grows, you can consider moving to more advanced error tracking tools like Sentry, TrackJS, etc.

Written by Michael KarĂŠn

melcor76 Full link to the article: https://medium.com/dailyjs/how-to-send-errors-into-slack-dc552e30506f

BEHIND THE CODE MAGAZINE

ngViking 2019

PREVIOUS PUBLICATIONS Check out the online archives of Behind the Code Magazine published by NG Poland:

Behind The Code Magazine #3 ngIndia edition 2019

Behind The Code Magazine #2 ngPoland 2018

See more: https://issuu.com/ngpoland