Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Look Deeply into Your App with Augury

Avatar for Vanessa Yuen Vanessa Yuen
July 01, 2016
Technology
110
0

Look Deeply into Your App with Augury

Presented at Angular Camp 2016 at Barcelona, Spain.

Avatar for Vanessa Yuen

Vanessa Yuen

July 01, 2016

More Decks by Vanessa Yuen

See All by Vanessa Yuen
Generative Art with p5.js
Avatar for Vanessa Yuen vanessayuenn
4
1.1k

Other Decks in Technology

See All in Technology
Jitera Company Deck
Avatar for Jitera Inc. jitera
0
260
なぜ、あなたのAPIは使われないのか？ AX時代の設計原則、ガードレール、運用体制
Avatar for Yoichi Kawasaki yokawasa
1
200
探索・可視化・自動化を一本化 Amazon Quickでデータ活用スピードを上げる方法
Avatar for こーへい koheiyoshikawa
0
170
データエンジニアリングとドメイン駆動設計
Avatar for 増田 亨 masuda220
PRO
14
2.4k
Data + AI Summit 2026 イベントレポート： 「AIがビジネスで意思決定するデータ基盤」へ
Avatar for KJ(Kenji Matsuda) nek0128
0
300
文字起こし基盤の信頼性
Avatar for abnoumaru abnoumaru
0
110
壊して学ぶAWS CDK: そのcdk deployで消えるもの、残るもの
Avatar for Kazuki Adachi k_adachi_01
1
470
[Droidcon Orlando '26] The Android Lens: Applying Mobile Forensics to AI Performance
Avatar for mvndy_hd amanda_hinchman
1
100
AI時代のYAGNI：「爆速で無駄になった機能」からの学び / 20260720 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
510
非定型なドキュメントを効率よくリファクタする 〜えぇ！？仕様書27本の移行が1日で終わったって！？〜
Avatar for subroh_0508 subroh0508
2
600
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
74k
インフラと開発の垣根を超えていき！〜元AWSインフラエンジニアがAWS開発で奮闘している話〜
Avatar for da-hatakeyama hatahata021
3
390

Featured

See All Featured
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
390
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
55k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.9k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
300
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
9.8k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
350
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
290

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