Front-end Development at Booking.com

This presentation was given to http://www.hackyourfuture.net/ students. It gives an overview about what a Front-end developer does working at Booking.com.
Slides cover a bit about A/B testing, deployment, frameworks, career tips, etc.

Transcript

1. Front-end Development at Booking.com @ramonvictor
2. Front-End Engineer at Recife, PE - Brazil
3. 1. What a Front-End Dev does at Booking.com? 2. JavaScript Frameworks we use 3. How do we test our code? 4. Practical exercise 5. General career tips 6. Q&A Agenda
4. 1. What a Front-End Dev does at Booking.com?
5. First of all, we have a big community!
6. 70+
7. We work in different departments:
 1. Customer facing 2. Hotel facing
8. We work across different teams
9. Front-end Dev Back-end Dev UX Designer Copy Writer Product Owner
10. Back-end Design
12. We support 3 different versions of the website
13. Desktop
14. Tablet (tDot)
15. Mobile (mDot)
16. They all have one thing in common: Back-end API
17. We need to support 42 languages 17
18. We need to support 42 languages 18
19. We need to support 54 currencies 19
20. We need to test all sort of browsers
21. Front-end Devs and A/B test
22. Slide's credit: @eshiota
23. Slide's credit: @eshiota
24. Slide's credit: @eshiota
25. jQuery 1.11.3 vs jQuery 2.1.3 We test everything!
26. Why do we do all that?
27. We are a data-driven company!
28. Front-end Devs contribute to different areas
29. But, our main responsibility is: JavaScript development
31. ✓ Cross-functional teams ✓ 3 versions of the website ✓ 42 languages and 54 currencies ✓ We A/B test everything ✓ Main responsibility: JavaScript 1. Quick recap:
32. 2. JavaScript frameworks we use
33. On partner facing systems: 1. AngularJS 2. RiotJS 3. ReactJS 4. Etc
34. But, we love pure JavaScript!
35. JS Modules
36. B.components
37. B.jstmpl.translations
38. Front-end tracking
39. ✓ Encapsulate modules ✓ B.components ✓ Translations ✓ JS tracking API 2. Quick recap:
40. 3. How do we test our code?
41. Testing approaches • Virtual machines (KVMs) • Windows machines • Testing team • Deployment testing
42. Local env. Virtual Machines (KVMS) Virtual machines Live Staging box
43. Windows machines
44. Testing team
45. Deployment testing • Staging box • Automated tests • Sanity test • Monitoring!
46. Monitoring > Unit testing
47. We still do unit testing for critical JS APIs
48. ✓ Virtual machines ✓ Windows for IE testing ✓ Testing team ✓ Deployment: sanity testing > automated testing > monitoring 3. Quick recap:
49. 4. Practical exercise
50. 5. General Front-end career tips
51. Technical • Vanilla JavaScript • Semantic HTML markup • Scalable CSS (responsive) • Progressive enhancement vs graceful degradation
52. Communication • Be a good listener • Learn how to present your ideas • Develop your public speaking skills
53. Attitudes • Be open to learn • Ownership • Think big, but start small • Put the users in the center of everything you do!
54. ✓ Technical: learn the foundations ✓ Communication: express your ideas with structure ✓ Atitudes: be open and think about the users all the time! 5. Quick recap:
55. Q&A Thank you!