Look Deeply into Your App with Augury

Presented at Angular Camp 2016 at Barcelona, Spain.

Transcript

1. Look Deeply Into Your App Vanessa Yuen with Augury @rangleio @vanessayuenn
2. WHAT IS AUGURY? @rangleio @vanessayuenn ◦ Angular 2 development aid ◦ Not just a debugger ◦ Chrome extension ◦ Open source effort started at Rangle.io ◦ (by wikipedia definition) an ancient bird watching practice??? Augury is...
3. Prototyped was first demoed at AngularConnect in October 2015 THE PAST @rangleio @vanessayuenn
4. After several major iterations with feedback from usability testing the beta version was launched at ngConf in May 2016. THE PRESENT @rangleio @vanessayuenn
5. WHY DO I NEED AUGURY? @rangleio @vanessayuenn
6. WHY DO I NEED AUGURY? @rangleio @vanessayuenn
7. WHY DO I NEED AUGURY? @rangleio @vanessayuenn
8. WHY DO I NEED AUGURY? @rangleio @vanessayuenn
9. WHY DO I NEED AUGURY? @rangleio @vanessayuenn
10. WHY DO I NEED AUGURY? @rangleio @vanessayuenn
11. WHY DO I NEED AUGURY? @rangleio @vanessayuenn
12. WHY DO I NEED AUGURY? @rangleio @vanessayuenn
13. WHY DO I NEED AUGURY? @rangleio @vanessayuenn
14. WHY DO I NEED AUGURY? Hierarchical Injection @rangleio @vanessayuenn
15. WHY DO I NEED AUGURY? Hierarchical Injection @rangleio @vanessayuenn Routing & Navigation
16. WHY DO I NEED AUGURY? Hierarchical Injection @rangleio @vanessayuenn Routing & Navigation Change Detection
17. WHY DO I NEED AUGURY? Hierarchical Injection @rangleio @vanessayuenn Routing & Navigation Change Detection #WTF
18. Augury is not just a debugger... • Component Relationships • Detailed Component Info • Dependency Hierarchy • Change Detection Strategy • Editable Component Properties • Router Structure Look Deeply Into Your App
19. DEMO TIME @rangleio @vanessayuenn
20. UNDER THE HOOD @rangleio @vanessayuenn ◦ Augury is an Angular 2 application written in TypeScript ◦ Chrome Extension APIs ◦ Angular 2’s Debug APIs ◦ Detailed architectural documentation in repo: github.com/rangle/augury
21. ROADMAP @rangleio @vanessayuenn 1. Stability 2. Final Angular-2.0 support 3. Support New “new” router 4. More UX feedback 5. Exploration for more features
22. OPEN SOURCE COMMUNITY @rangleio @vanessayuenn That’s all of you!
23. WE LOVE CONTRIBUTIONS! @rangleio @vanessayuenn github.com/rangle/augury
24. INTERNAL CONTRIBUTORS Bertrand Karerangabo Sumit Arora Igor Kamenetsky Vanessa Yuen Fatima Remtullah Justina Choi Richard Hobeiche Mike Costanzo
25. Beta Version of Angular Augury is available on the Chrome Web Store GET AUGURY @rangleio @vanessayuenn
26. THANK YOU! @rangleio @vanessayuenn