The Thorny Road to Seamless Mocks

Mimic.js is an open source tool for imitating server responses purely on the client-side. In this talk you will learn about the tool, the technical challenges we faced trying to make it unobtrusive for your application, and real-life problems we had, have and will have by making it open-source.

Transcript

1. The Thorny Road to Seamless Mocks Ilya Gelman
3. Ilya Gelman Head of NYC Office @ 500Tech Organizer of meetups and conferences Wrote a book on Redux Developing, consulting and teaching
5. @ilyagelman
6. THE PATTERN
7. FRONT-END BACK-END _____________________________________________________ _____________________________________________________
8. SOLUTIONS?
9. learning curve special configuration synchronization with team members updating mocks when API changes registration on 3rd party websites integration tests ☹ custom non-CRUD endpoints another tab in the terminal
10. ?
12. Maayan Glikser Alex Ilyaev
13. Share your ideas to inspire others
14. The First Challenge
16. BDSM TA DA!!! Badass Server Mocks
17. Even Harder Challenge
20. Dan Abramov
21. The Decisions Challenge
22. Professional Designer Skills™ +
23. GET POST /users?all=true /users Save Matched Request POST /users { name: "Alex" } name: "Alex" Successful GET Successful sign-in Slow server Status code Delay Response headers Response data 201 0 ms [created] All mocked requests Scenarios + Captured requests Mocked requests Successful GET Slow GET + Create new state… Remove state Unmock * refetch real data TA DA!!!
24. Professional Designer Skills™ +
25. TA DA!!!
26. The Promotion Challenge
27. Easy to find!
28. Easy to find? NSFW NSFW NSFW NSFW NSFW NSFW
34. Open source secret: No one cares about your project unless it’s popular (and when it is, you wish people would care less)
36. Another Story
37. Ilya Birman
38. The Name Challenge, Again
39. Mimic
40. Meet other people to make things happen
44. DEMO
45. Fetch API Web Workers React Native Remote mocks Webpack integration Recording requests Export Import Import Filters Rich API Scenarios/Groups Request names Headers editor Wildcards
46. Technical Challenges
47. CSS
48. Iframe - API is hard as hell to implement CSS `all` property - doesn’t work in IE and Edge CSS reset - !important would still break things
49. Custom Elements <mimic-div> <mimic-span>
50. Code Editor
52. Fetch API
53. UI Challenges
54. font rendering
55. user-select: none;
56. 1px “jumps”
57. resizing
58. off-canvas
59. Future Challenges
60. the written word community indifference binary formats other platforms staying sane
61. mimic.js.org
62. ilya@500tech.com @ilyagelman Thanks!