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

Stuck in the Middle with You: Exploring the Con...

Justin Weiss
September 10, 2016
Programming
0
140

Stuck in the Middle with You: Exploring the Connections Between Your App and the Web

Our apps are becoming more complicated and more distributed. We’re extracting APIs and handling callbacks and pings from the services we depend on. We’re using our data and services from different clients, like rich JavaScript applications and mobile apps. And as we fling our logic into more places, it’s harder to see what’s actually going on between them. If you’re working in applications that have become a forest of APIs and services, or you’ve ever said, “I really wish I could just see what kind of data this server thinks I’m handing it, and what I’m getting back,” this talk is for you. With a few tools and some simple techniques, you’ll watch the data go from your apps to your APIs and see your responses, callbacks, and pings come back.

Justin Weiss

September 10, 2016
Tweet

More Decks by Justin Weiss

See All by Justin Weiss
Building a Collaborative Text Editor
justinweiss
1
1k
A Deep Dive into Sessions
justinweiss
2
1.2k
Metaprogramming? Not good enough!
justinweiss
1
480

Other Decks in Programming

See All in Programming
C++でシェーダを書く
fadis
6
4.2k
Functional Event Sourcing using Sekiban
tomohisa
0
110
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
490
Djangoの開発環境で工夫したこと - pre-commit / DevContainer
hiroki_yod
1
350
カンファレンスの「アレ」Webでなんとかしませんか？ / Conference “thing” Why don't you do something about it on the Web?
dero1to
1
130
Realtime API 入門
riofujimon
0
160
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.2k
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
6
1.7k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
0
1.1k
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
130
WebAssembly Unleashed: Powering Server-Side Applications
chrisft25
0
700
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
100

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
24k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
The Cult of Friendly URLs
andyhume
78
6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Building Applications with DynamoDB
mza
90
6.1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Statistics for Hackers
jakevdp
796
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k

Transcript

  1. Stuck in the Middle with You Exploring the Connections Between

    Your App and the Web Justin Weiss @justinweiss

  2. @justinweiss

  3. justinweiss.com Practicing Rails @justinweiss

  4. Our apps are more connected @justinweiss

  5. Phone + API backend @justinweiss

  6. @justinweiss

  7. Callbacks @justinweiss

  8. @justinweiss

  9. @justinweiss

  10. This is fine ...right? @justinweiss

  11. Nope. @justinweiss

  12. Feedback? Errors? @justinweiss

  13. JSON::ParserError: 784: unexpected token at '<!DOCTYPE html> @justinweiss

  14. What are the options? @justinweiss

  15. Logging! @justinweiss

  16. Talk over. @justinweiss

  17. It gets everywhere @justinweiss

  18. It needs to go away @justinweiss

  19. The one thing you didn't log is the thing you

    needed to see @justinweiss

  20. Take a step back @justinweiss

  21. It's just debugging @justinweiss

  22. What do you need to debug effectively? @justinweiss

  23. What is actually true? @justinweiss

  24. You need Visibility @justinweiss

  25. 1. That can't happen. 2. That doesn't happen on my

    machine. 3. That shouldn't happen. 4. Why does that happen? 5. Oh, I see. 6. How did that ever work? 1 1 http://web.archive.org/web/20051027173148/http://www.68k.org/~jrc/old-blog/ archives/000198.html @justinweiss

  26. What else? @justinweiss

  27. How do you separate? @justinweiss

  28. You need Isolation @justinweiss

  29. Visibility and Isolation @justinweiss

  30. Visibility: Requests and Responses @justinweiss

  31. Isolation: Use parts independently @justinweiss

  32. What's the dream? @justinweiss

  33. Monitoring of all requests without additional code @justinweiss

  34. Can fake out any part of the system I own

    @justinweiss

  35. Three things → Send requests → Monitor requests and responses

    → Receive requests @justinweiss

  36. That's what this is about @justinweiss

  37. Better debugging -> Incremental development @justinweiss

  38. @justinweiss

  39. Sending Requests @justinweiss

  40. curl @justinweiss

  41. $ curl https://api.github.com/users/justinweiss { "login": "justinweiss", "id": 1020, "avatar_url": "https://avatars.githubusercontent...",

    ... } @justinweiss

  42. $ curl -d "{\"text\": \"hello, _world_\"}" \ https://api.github.com/markdown <p>hello, <em>world</em></p>

    @justinweiss

  43. It's everywhere! @justinweiss

  44. @justinweiss

  45. Postman2 2 https://www.getpostman.com @justinweiss

  46. @justinweiss

  47. Paw3 3 https://paw.cloud @justinweiss

  48. Intercept everything! @justinweiss

  49. mitmproxy @justinweiss

  50. What does mitmproxy4 do? 4 https://mitmproxy.org @justinweiss

  51. brew install mitmproxy pip install mitmproxy @justinweiss

  52. @justinweiss

  53. What about SSL? @justinweiss

  54. @justinweiss

  55. @justinweiss

  56. /etc/hosts on mobile @justinweiss

  57. @justinweiss

  58. Don't forget to disconnect! @justinweiss

  59. (Except for the three times it happened while creating this

    talk) @justinweiss

  60. Alternatives? @justinweiss

  61. Fiddler5 Charles Proxy6 6 https://www.charlesproxy.com 5 http://www.telerik.com/fiddler @justinweiss

  62. Where are we now? → Send requests @justinweiss

  63. Where are we now? → Send requests → Watch requests

    & responses @justinweiss

  64. Wait for feedback @justinweiss

  65. Bidirectional communication @justinweiss

  66. Don't call us, we'll call you @justinweiss

  67. Don't call us, we'll call you @justinweiss

  68. requestb.in @justinweiss

  69. @justinweiss

  70. webmock.io @justinweiss

  71. @justinweiss

  72. webmock.io @justinweiss

  73. What about local development? @justinweiss

  74. ngrok7 7 https://ngrok.com @justinweiss

  75. @justinweiss

  76. Where are we now? → Send requests → Monitor requests

    and responses → Receive requests @justinweiss

  77. What's next? @justinweiss

  78. Example: OAuth2 @justinweiss

  79. What do we need? The client must be capable of

    interacting with the resource owner's user-agent (typically a web browser) and capable of receiving incoming requests (via redirection) from the authorization server. — OAuth2 RFC8 8 https://tools.ietf.org/html/rfc6749#section-4.1 @justinweiss

  80. @justinweiss

  81. → client id → client secret → redirect uri @justinweiss

  82. @justinweiss

  83. @justinweiss

  84. @justinweiss

  85. Example: Making an authenticated request to GitHub @justinweiss

  86. @justinweiss

  87. @justinweiss

  88. @justinweiss

  89. @justinweiss

  90. @justinweiss

  91. It's complicated @justinweiss

  92. It's complicated @justinweiss

  93. It's complicated @justinweiss

  94. Visibility @justinweiss

  95. Isolation @justinweiss

  96. Visibility and Isolation @justinweiss

  97. → Send requests: curl, Postman, Paw @justinweiss

  98. → Send requests: curl, Postman, Paw → Monitor: mitmproxy, Fiddler,

    Charles Proxy @justinweiss

  99. → Send requests: curl, Postman, Paw → Monitor: mitmproxy, Fiddler,

    Charles Proxy → Receive requests: requestb.in, webmock.io, ngrok @justinweiss

  100. → Send requests: curl, Postman, Paw → Monitor: mitmproxy, Fiddler,

    Charles Proxy → Receive requests: requestb.in, webmock.io, ngrok @justinweiss

  101. Justin Weiss Avvo [email protected] twitter: @justinweiss @justinweiss

  102. Questions? @justinweiss

  103. Justin Weiss Avvo [email protected] twitter: @justinweiss @justinweiss