Newsletter #3 - TypeScript News
Welcome to the third edition of DeveloPassion's newsletter.
Spread the word!
First of all, I'd like to ask all of you to help me out a bit. If you find this newsletter interesting, then please do take a bit of time to share this link to others on social media: https://mailchi.mp/fb661753d54a/developassion-newsletter With your help, others will also get a chance to discover and enjoy reading it. As an added benefit, it'll also motivate me to continue the experience! =)
TypeScript 3.7 has been released (it's been a while already). Isn't that great?
Now I just have to wait for Angular to support it before I upgrade: https://github.com/angular/angular-cli/issues/16071
To me, the coolest features in this release are:
- Optional chaining, which allows us to spare tons of lines of code just to check if variables are defined
- Nullish coalescing, which allows us to define fallback values when dealing with null/undefined. Again, this will help avoid writing tons of boilerplate code!
const age = person.personalDetails?.age;
Which is equivalent to the more verbose version:
const age = person && person.personalDetails && person.personalDetails.age;
Of course, with the code above, the
age constant can actually be a number or undefined. If you want to get rid of the undefined, then you can use the second coolest feature of TS 3.7: nullish coalescing:
const what = yes?.no ?? wtf
How fun is that? ;-)
The line above reads as follows: if yes is not null or undefined, then we set "what" to "no"; otherwise we set it to "wtf".
By combining optional chaining and nullish coalescing, we will save tons of trees when printing out our code... A-W-E-S-O-M-E-Rrrrrrrrr.
There are of course many other smaller features in this release, which you can read about in the official release notes.
TS Conf 2019 videos
While we're talking about TypeScript, did you know that the videos of the last TS conf are up? https://tsconf.io/videos.html
This week, I've stumbled upon CSSDB: https://cssdb.org/
It is a wonderful resource that lists all current and future CSS features, as well as support for each in Web browsers. Thanks to this, we have a sort of equivalent of caniuse (https://caniuse.com/) for CSS!
Never forget things at work
I re-read an old blog article of mine today, titled "Do you ever forget things at work?". It was written in 2016 (ages ago!! :p), but is still fully valid today.
It describes a few tricks that I use on a daily basis to keep track of everything and make sure that I never forget anything voluntarily(this last word is key) ;-)
You can read it over here on my personal blog: https://www.dsebastien.net/2016/02/21/do-you-ever-forget-things-at-work/
Complex forms with Angular
When you create complex forms with Angular (out of the realm of demo code), you realize that things that may seem simple on the surface (e.g., "this is just a form with four simple fields") are not so straightforward to implement (e.g., "ah in fact this field and that field are linked together and there are various business rules to respect; that field is an autocomplete and we want enter/tab to validate the current selection").
The first thing to learn with Angular forms is that Reactive Forms are the way to go. Template-driven forms are simple, but not great in any way. I've covered this in greater length in the Angular chapter of my TypeScript book.
In our project, we've decided to create reusable dumb components whenever possible in order to maximize reuse of our code. Applied to complex forms, this means that a complex data structure handled through a form will actually be a composition of multiple components, each handling a specific sub-part of the data model. Composed together, those parts form (pun intended :p) a complex reactive form.
One useful Angular construct to be aware of is the ControlValueAccessor, which makes it possible to use dumb components as FormControls, which is terrific!Kara Erickson has made a few great presentations covering nested forms and ControlValueAccessor, which you can find here and there, and also there.
Here are a few awesome resources about CVAs:
There are also two libraries that I'd like to recommend for forms:
- Light library to make your life easier: https://github.com/cloudnc/ngx-sub-form
- Heavy weaponry: https://github.com/ngx-formly/ngx-formly and a cool talk about it: https://juristr.com/blog/2019/12/ng-be-2019-formly-talks/
Cool CSS trick
I don't know if you already seen this one, but here's an awesome JS snippet that will prove useful when fiddling with layout using CSS: https://medium.com/@gajus/my-favorite-css-hack-a7f447026cf2 What it does is outline every DOM element on the page with different colors. There's an alternative version from Addy Osmani called the CSS Layout Debugger. It is really useful as it allows to easily see where everything is, the space it takes, etc.
Enterprise AngularManfred Steyer has published a small (& free) e-book about Enterprise Angular: https://leanpub.com/enterprise-angular It covers some cool things like Nrwl NX, Micro frontends and DDD. I share Manfred's view about the DDD book of Eric Evans; it should be considered like a toolbox and not like a bible. By the way if you don't know about Domain Driven Design, then please do read Manfred's book for starters to get an idea about it; then of course read the "bible".
Kubernetes NodePort, LoadBalancer, Ingress, duh?!
The last bit is pretty much what I felt like when I started learning more about how to expose services deployed in Kubernetes to the outside world. Now it all seems simple and logical, but isn't it true of things we now understand? If you're curious about those, then take a look at this great article from Sandeep Dinesh (GCP): https://medium.com/google-cloud/kubernetes-nodeport-vs-loadbalancer-vs-ingress-when-should-i-use-what-922f010849e0
That's all folks!
I'm really interested to hear about what you think of this new initiative, ideas to improve, links to share, etc. Don't hesitate to contact me through Twitter: https://twitter.com/dSebastien
If you find this newsletter interesting, then please share the link around: https://mailchi.mp/fb661753d54a/developassion-newsletter
See you next time!