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

Look Deeply into Your App with Augury

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
GoとSIMDとWasmの今。
Avatar for asuka askua
3
490
プラットフォームエンジニア ワークショップ/ platform-workshop
Avatar for Databricks Japan databricksjapan
0
230
ルールやカスタム機能、どう使う？理想の出力を引き出すために今知りたいIBM Bob 5つの機能
Avatar for mu (Mizuho Uehara) muehara
1
310
【Gen-AX】20260530開催_JJUG CCC 2026 Spring
Avatar for Gen-AX株式会社 genax
0
400
タクシーアプリ『GO』の実践的データ活用
Avatar for GO Inc. dev mot_techtalk
2
110
関西に縁あるMicrosoft MVPsが語るCopilotの未来
Avatar for Kaz Asada | しがない情シス kasada
0
1k
個人の発見を、組織の知恵に 〜生成AI活用を"探索"から"組織の仕組み"へ〜
Avatar for KintoTech_Dev kintotechdev
2
840
実装は速くなった、レビューはどうする？ ― 自身のレビューをAIで再現させるサーヴァントエンジニアリングのすゝめ / Implementation got faster. So what about reviews? — An invitation to Servant Engineering: Recreating your own code reviews with AI
Avatar for nrs nrslib
6
3.1k
oracle-to-databricks-migration-with-llm-and-dbt
Avatar for case-k-git casek
1
430
「嘘をつくテスト」の失敗例から学ぶ 良いテストコード #frontend_phpcon_do
Avatar for asumikam asumikam
0
160
AIガバナンス実践 - 生成AIコネクタのデータ漏洩リスクと実務対策
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
0
170
脅威をエンジニアリングの糧にして：恐怖を乗り越えた先にあったもの / Turn threats into fuel for engineering: what lay beyond overcoming fear
Avatar for nrs nrslib
1
380

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.9k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
8.4k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.8k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
340
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
7.9k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
310

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