NG-NL Summary

What I loved at NG-NL 2017 conference.

Transcript

1. NG-NL 2017 Anca Spătariu
2. WHAT IS NG-NL • Niched Angular Conference organised by Xebia • Yearly event in Amsterdam • Targeted for intermediate to advanced engineers • Decently priced (about 220EUR / conference day - Early Bird)
4. THE TALKS
5. ADDICTED TO ANGULARJS Pete Bacon Darwin & George Kalpakas
6. THE SPEAKERS • Both on the Angular Core Team • Both Working on ngUpgrade
7. KEY POINTS • The cool people don’t say Angular 1 & Angular 2 (it’s AngularJS and “just” Angular) • Migrating from AngularJS to Angular shouldn’t be painful, or so they say…
8. “For anyone who hasn’t guessed yet, ngUpgrade is a library that helps you migrate your AngularJS apps to Angular piece by piece. So, essentially, you can have AngularJS and Angular side by side in the same hybrid application.” – George Kalpakas
9. “This is the dream, guys!” – Pete Bacon Darwin
10. WHY NOT? • Large app & Small team • Lots of 3rd party code • Large common codebase
11. NGUPGRADE CONCEPTS • Bootstrapping • Downgrading Components • Downgrading Services • Upgrading Components • Upgrading Services • Migrating
12. BOOTSTRAPPING • Because we are using two frameworks, we need to bootstrap both Angular and AngularJS in the same app • We need to bootstrap the Angular Module first and then the AngularJS module from within the Angular Module (ngDoBootstrap hook) • However, because AngularJS gets to run its compile service first, it owns the top level element (everything inside can be either Angular or AngularJS)
13. MIGRATING • Converting the code from an AngularJS component to an Angular componens • Very important: restructure your AngularJS code in an… Angular-ish manner beforehand (componentize).
14. DOWNGRADING COMPONENTS • Making an Angular component available to AngularJS • Helper: downgradeComponent()
15. DOWNGRADING SERVICES • Making an Angular service available to AngularJS • Helper: downgradeInjectable()
16. UPGRADING COMPONENTS • Making an AngularJS “thing” available to Angular • In order to do that, we need to register a directive (@Directive decorator) - this will represent the component in the Angular world • Helper: the UpgradeComponent class (extended to create the facade)
17. UPGRADING SERVICES • Using AngularJS services inside Angular services and components • We need a factory function that will retrieve the service from the AngularJS injector ($) and return it. Then we can use the function to register a provider.
18. NGUPGRADE PLANS FOR THE FUTURE • Lazy loading AngularJS and Angular • Better testing (it’s terrible to test at the moment since you have to bootstrap a micro hybrid app for each unit test) • Better dual-router • Better documentation
19. APPREHENDING YOUR APP WITH AUGURY Shmuela Jacobs
20. THE SPEAKER • Front-End Developer and Consultant from Israel • ngGirls founder
21. “Angular Augury is a tool that interprets our Angular application, its architecture and its behaviour. It’s telling us if we’re doing the right thing, if the application is doing what it’s supposed to do.” – Shmuela Jacobs
22. ANGULAR AUGURY • It’s an open source Chrome extension (a dev tool) • It’s ran by rangle.io (the people who developed Batarang, Augury’s predecessor) • It’s an Angular app itself • It’s good for devs, QAs and team leads
23. KEY IDEAS • You can find Augury as a tab Dev Tools • You can see the app structure and it highlights the components in the browser when you hover over the nodes in the component tree • You can see the properties and state • You can see the injection graph (dependency graph)
24. KEY IDEAS • You can see all the modules in the application starting with the root module — the app module (with imports, exports etc.) • You can see the router tree (graphic representation) — also indicates lazy loaded routes • It’s really cool for new team members who want to get to know the application
25. KEY IDEAS • You can change data inside Augury (just like you would change a CSS prop) • You can emit events from Augury • You can jump to the source-code and add breakpoints
26. Router Tree
27. Injector Graph
28. COMPONENT BASED API FOR YOUR ANGULAR COMPONENTS WITH GRAPHQL Uri Goldshtein (introductory part)
29. THE SPEAKER • Open Source developer • Contributes to Meteor / Apollo
30. WHY GRAPHQL • With classic REST you can either make multiple requests for each data “collection” or you create a custom endpoint that sends just the data you are going to use • With GraphQL, you ASK for what you need and you GET that info (and just that)
31. WHY GRAPHQL • You can ask for a whole data structure (no matter how deep/nested the hierarchy is) in just one request, without overfetching • You get all the data in one response (according to the GraphQL schema).
32. WHY GRAPHQL • Thanks to the GraphQL schema, you have autocomplete (yey!) and it’s easier to mock data — so the BE and FE can work independently • You can put a GraphQL layer on top of any database structure
33. WHY GRAPHQL • With Apollo dev tools you can make queries in the browser • It’s a typed API, so it plays well with TypeScript. • To use GraphQL in Angular: npm install appolo-angular
34. OTHER INTERESTING TALKS • Todd Motto - Reactive Forms • David Muellerchen - ACME (Angular-Cli Manage everything)
35. THANK YOU! Questions? - or do you want to go to lunch?