Front end Development for Distributed Teams
Download as PPTX, PDF1 like379 views
Frontend Development for Distributed Teams discusses Skyscanner's approach to developing for distributed teams. It outlines how Skyscanner standardized on fundamental frontend development practices like continuous delivery, deployment orchestration, reusable component libraries, and templates to help different teams work consistently across locations. The talk provides examples of how Skyscanner leveraged tools like Drone, Slingshot, Backpack React components, and OpenTable's open components library to establish shared practices for building and deploying frontend applications at scale across a global organization.
Front end Development for Distributed Teams
- 1. Frontend Development for Distributed Teams 28th March 2018
- 2. Ardy Dedase https://github.com/ardydedase https://www.linkedin.com/in/ardydedase/ • Joined Skyscanner in 2013. • Worked with multiple groups: Data Acquisition, Platform, B2B, Partner Onboarding. About the speaker
- 3. Before we start What this talk IS… • High-level view of our three fundamental frontend development standards. • First hand experience of someone who’s not working on frontend full-time. • From the perspective of a Skyscanner engineer who uses these tools and services built and maintained by our awesome “Developer Enablement” teams.
- 4. Before we start Outline • The Skyscanner Story • Distributed teams • Nailing the basics • Frontend standards • Cookiecutter • React Components • Open Components
- 6. Page Title How it all began
- 8. Growth
- 9. Skyscanner launched Expands across Europe with foreign site launches First 100k visits in a day First app launched Singapore business established to support APAC growth Beijing office opened Miami business established to support Americas growth Skyscanner moves from flights to travel with car hire launch and hotel technology acquisition Sequoia secondary investment values Skyscanner at $800million 2003 2005 2007 2011 2013 2014 Sofia office opened
- 10. Acquired Chinese travel search site Youbibi and opened office in Shenzhen Skyscanner powers MSN travel worldwide Five new partners invest $192m Acquired Distinction and opened office in Budapest Launched apps for hotels and car hire Joint venture with Yahoo! JAPAN launched Larger Budapest office and London office open 2015 2016 Facebook bot launched, followed by Skype bot and Alexa skill All three apps combined Skyscanner acquired by Ctrip £1.46bn
- 11. Exponential and very healthy growth 0 10 20 30 40 50 60 70
- 12. Our ultimate goal: to make travel booking as easy as it is today to buy a book online
- 14. Global
- 15. 60,000,000
- 17. Challenges
- 19. Distributed teams Engineering Challenges • Different standards • Too many languages and frameworks • Duplication of work • Siloes (us vs. them) • Communication (time zone differences) • Slow release cycles
- 21. Distributed teams We were not ready… • Infrastructure and tooling • Too much autonomy given to all teams
- 24. Continuous Delivery Drone (drone.io) • Automates the release workflow • Configuration as code • Container native. Pipeline is executed in the container.
- 26. Deployment orchestration Slingshot • Deploys our services to our ECS clusters • Configuration as code • Blue-green deployment.
- 27. From 20 to 2 million releases per year • http://codevoyagers.com/2016/10/24/from-20-to-2-million-releases-a-year- part-1/ • http://codevoyagers.com/2016/10/31/from-20-to-2-million-releases-a-year- part-2/ • http://codevoyagers.com/2016/11/07/from-20-to-2-million-releases-a-year- part-3/ More about our deployment pipeline
- 29. Cookiecutter
- 30. Cookiecutter Reusable project templates • Standardizes the way our services are built. • Pre-configured to work with our deployment pipeline. • https://github.com/audreyr/cookiecutter
- 31. Cookiecutter
- 32. Demo
- 33. React components
- 34. React components Reusable React components • Standardizes the design resources and guidelines. • Helps us achieve a consistent look and feel across our web applications. • https://backpack.github.io/
- 35. React components
- 36. Demo
- 37. Open components
- 38. Open components Reusable Open components • Publish, share and reuse web components across the website. • Abstracts away complicated infrastructure and leaves developers with very simple, but powerful building blocks that handle scale transparently. • https://github.com/opencomponents by OpenTable.
- 39. Open components – how it works
- 40. Open components – cookie cutter flow
- 41. Demo
- 43. Lessons learned Lessons learned • It works both ways. • It will not work for all engineers. • Less effort in handing over ownership and team rotation.
- 44. Thank you
Editor's Notes
- #2: Hopefully you can learn something and apply it to your organization.
- #3: Joined different teams. Skyscanner felt like a different company every year. Experienced the hyper growth first hand. Re-organization, re-structuring and changes were common. That’s all you need to know within this context, if you really want to know more about me. Google my name.
- #4: I won’t dissect each service and explain how the code works. I can’t remember the last time I edited a CSS file. I wasn’t involved in the development of these tools and services. I only contribute in the doc and report bugs.
- #8: Back in the early 2000s there were many budget airline sites in the UK. Gareth was regularly travelling to Europe to ski with his brother, and trawling all these sites proved an extremely time-consuming process. Gareth, Bonamy and Barry put their heads together to come up with a solution, and from a simple spreadsheet and a few lines of code, Skyscanner was born. It grew by word of mouth.
- #10: (Events can be removed to ensure you’re able to talk about simply those that fit with the presentation goal on the day) - Fogg. hotels
- #11: (Events can be removed to ensure you’re able to talk about simply those that fit with the presentation goal on the day)
- #12: We’ve celebrated double digit revenue growth for seven consecutive years, and continue to grow at an accelerated rate.
- #16: 60m UMVs. Visitors to Skyscanner in 2015 grew 48 percent over the prior year. The Asia Pacific region continued to show strong growth, with visitors increasing 48 percent last year. In China, a focus for Skyscanner since the acquisition of Youbibi in 2014, visitors grew 67 percent. The Americas region saw 55 percent growth in visitors last year, more than doubling in the U.S. Visitors in Europe grew 42 percent.
- #19: Remember the acquisitions: Fogg Youbibi Distinction Different from our stack PHP, Java vs C#, Python
- #20: Wasted effort. Not efficient. Differing standards. Engineer coming from company A has a different opinion, etc.
- #21: Started working on moving to the cloud Each Team had AWS budget of $500 / month Every team had the autonomy Mostly historical reasons because of the acquisitions For example, there was a time when we had two frameworks on Skyscanner.net – backbone and AngularJS
- #22: We were not ready because we did not ‘nail the basics’ Here’s what we needed
- #23: The starting point.
- #25: We were not ready because we did not ‘nail the basics’ Here’s what we needed
- #27: We were not ready because we did not ‘nail the basics’ Here’s what we needed
- #29: The starting point.
- #31: Services loosely used – can be web applications
- #32: We were not ready because we did not ‘nail the basics’ Here’s what we needed
- #35: Button colors
- #39: Button colors
- #44: Button colors