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

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

Justin Weiss
September 10, 2016
Programming
0
120

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
810
A Deep Dive into Sessions
justinweiss
2
1.1k
Metaprogramming? Not good enough!
justinweiss
1
440

Other Decks in Programming

See All in Programming
Fragment Composition of GraphQL
quramy
13
1.5k
Git Rebase
bkuhlmann
11
1.6k
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
AmperとFleetを使ったAndroidアプリ
yoppie
0
250
Let's learn code review
riofujimon
2
570
敵対的ポイフル
futabato
0
130
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
970
Hanami and htmx
bkuhlmann
0
220
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.1k
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
220

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
21
1.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Being A Developer After 40
akosma
66
580k
Navigating Team Friction
lara
179
13k
GraphQLとの向き合い方2022年版
quramy
33
12k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Adopting Sorbet at Scale
ufuk
69
8.6k
How STYLIGHT went responsive
nonsquared
92
4.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k

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