1. @jdpearce / #AisForAngular
Jo Hanna Pearce
A is for Angular. The reason we’re here!
There’s quite a lot to it, not all of it clear
What I’m going to attempt is poetic oration
Of Angular aspects that cause consternation
There’s so much to say and I haven’t much time
I’ve got 26 letters to get through in rhyme.
2. @jdpearce / #AisForAngular
B is for…
B is for Browser, for which we all build
There isn’t just one, we may need polyﬁlls
We test diﬀerent systems as much as we’re able
So as not to exclude anyone from our table.
3. @jdpearce / #AisForAngular
C is for…
C is for Core where we ﬁnd ContentChild
Compiler as well which each module provides
Common we need as the name might suggest
And ComponentFixture with which we write tests
4. @jdpearce / #AisForAngular
D is for…
D is for Decorators, what are they for?
They make classes and methods and properties do more!
How do we add such syntactical sweetness?
They’re just functions that bring some grammatical neatness!
5. @jdpearce / #AisForAngular
E is for…
E is for Elements. Exciting and new!
Portable Angular components for you!
Not only easier to load on the ﬂy
But - standards compliant - they’re consumable by
There’ll be fun getting future big projects to “shipped”!
6. @jdpearce / #AisForAngular
F is for…
F is for Formats and Factories and Forms.
Driven by templates or is reactive the norm?
This is one of those areas where preference feels muddled
And seems like it could leave developers troubled
7. @jdpearce / #AisForAngular
G is for…
Under G we ﬁnd Guards and some methods that get
From protecting our Routes to LocaleDateFormat
The methods are more or less simple enough
But explaining the router and guards would be tough…
With the time rushing onward I won’t even try
If I have to use more sketchy rhymes I might cry.
8. @jdpearce / #AisForAngular
H is for…
H is for Http and our Host
Hypertext transport is something that most
Of the devs in this room will probably get
But you may not have used the Host decorator yet
It tells the injector just where it should cease
As it tries to acquire what it needs piece by piece
9. @jdpearce / #AisForAngular
I is for…
I is for Ivy. Or Renderer3
Simpler and faster and small as a ﬂea
Or that’s the intention it’s not quite yet done
But it’s out there to try if you want to have fun
10. @jdpearce / #AisForAngular
J is for…
J brings us on to JitCompilerFactory
About which the docs are quite unsatisfactory
There’s JsonPipe too which I’m sure we’ve all used
But as it’s impure it should not be abused
It’s great for debugging, seeing under the skin
Of components we write and the properties within.
11. @jdpearce / #AisForAngular
K is for…
K is for KeyValues used in the map
For detecting the changes throughout our app
This has left many devs feeling hopelessly wrecked
As they look up ExpressionChangedAfterItHasBeenChecked
12. @jdpearce / #AisForAngular
L is for…
L is Location, the way we might tell
The parts of our app from each URL
The strategy used changes how the address
Of our pages will look and whether the mess
With its readable straightforward slashes and slugs
Will instead of all that be just hashes and bugs
13. @jdpearce / #AisForAngular
M is for…
M is for Modules and Messages and Mocks
While module is one of the main building blocks
The MessageBus may not be something you’ve found
It sends data between the UI and background
While the web worker code isn’t ready just yet
It’s importance will grow in the future I bet…
14. @jdpearce / #AisForAngular
N is for…
Navigation is next and the NO_ERRORS_SCHEMA
And of course all the classes beginning Ng*
Who’d have thought that the devs of a modern creation
Would succumb to the need for Hungarian notation?
15. @jdpearce / #AisForAngular
O is for…
Onwards to O for OnInit, OnDestroy,
The decorators Optional and Output, oh joy!
There’s nothing that seems unfamiliar here
Just parts of the system we hold near and dear
16. @jdpearce / #AisForAngular
P is for…
P is for Plural a curious thing
If you look up the rules for outputting strings
For the locales your users might reasonably expect
The unicode CLDR has the specs.
I don’t recommend it for a light bedtime read
But for localisation it’s a doc you should heed.
17. @jdpearce / #AisForAngular
Q is for…
Q is for querying all of the things.
We can query with types or query with strings
We can query the content, query the view
And be sure we’re updated of anything new!
18. @jdpearce / #AisForAngular
R is for…
To observe all the things we need RxJS
And there’s more to this lib than some docs might suggest
If you’re struggling with state and try NgRx
You’ll learn more of its breadth and at ﬁrst be perplexed
How you ever could limit yourself to subscriptions
That ended with only a single emission…
19. @jdpearce / #AisForAngular
S is for…
With S we might like to consider Schematics
For workﬂow improvements they could be dramatic
But only if what we are hoping to gain
Is a better approach to the code we maintain
Pragmatically projects that stay fairly small
May not have a need for Schematics at all.
20. @jdpearce / #AisForAngular
T is for…
T is for TypeScript, not as hard as you thought
Although lately it seems there’s a war being fought
Between those of us pleased with their explicit typing
And others who seem to be constantly sniping
And guessing what everything does is the key!
21. @jdpearce / #AisForAngular
U is for…
U brings the UpgradeModule into sight
And I honestly can’t recommend that you ﬁght
With the hybridisation of Angular Apps,
Separate them by route, don’t fall into the traps
Of thinking that as this is something we could,
That means it is one of the things that we should.
22. @jdpearce / #AisForAngular
V is for…
V brings us round to ViewChild and ViewChildren
ViewContainerRef and ViewEncapsulation
I really can’t ﬁt into here what they do
But note the distinction between content and view
There’s a DOM for the things that we View on the screen
And another for Content that sets up the scenes
23. @jdpearce / #AisForAngular
W is for…
W brings us to classes that look
As though they all start with the phrase “what the f…”
The intent here is not just to make you all smirk
WTF stands for Web Tracing Framework
If performance is key this may be what you’re using
But for everyone else we see code that’s amusing.
24. @jdpearce / #AisForAngular
X is for…
X is for XhrFactory and well…
What else is there under this letter to tell?
They’ve wrapped XMLHttpRequest
It’s one of the things that allows us to test!
25. @jdpearce / #AisForAngular
Y is for…
Y is for You, all the people here seated
Who wrestle with code and remain undefeated
Community is something that makes us all better
(And frankly there’s nothing that starts with this letter)
26. @jdpearce / #AisForAngular
Z is for…
Z is for Zones, about which all I’ll say
Is I’m hoping we no longer need them one day.
And that little thought is the last thing I’ll mention
I’m grateful you’ve lasted the course, paid attention
I’ve rushed through a lot in a very short time,
And I think now I’ve used all my Angular rhymes!