How to Successfully Establish a New Front-End Technology in Your Company's Age-Old Monolith

We love what we do - when we can do what we love! The opportunity to try out and use fancy new techy-stuff is often part of our passion, but it's not always that easy to get. When working on a larger, organically grown product, sometimes it's challenging to make new technology find its way into that. In this talk, I want to share some experiences with introducing React into our e-commerce system at Jochen Schweizer.

Transcript

1. HOW TO HOW TO SUCCESSFULLY ESTABLISH SUCCESSFULLY ESTABLISH A NEW FRONT-END TECHNOLOGY A NEW FRONT-END TECHNOLOGY IN YOUR COMPANY'S IN YOUR COMPANY'S AGE-OLD MONOLITH AGE-OLD MONOLITH by Sebastian Eck 1
2. CONTENTS CONTENTS Intro: a bit about me, my employer, and our tech The journey: from a leisure time prototype to site-wide usage Sum-up: the good, the bad, and the ugly lessons learned 2
3. ABOUT ME ABOUT ME Sebastian Eck (you may also call me Ecki, if you like) So ware Developer at Jochen Schweizer Technology Solutions since July '15 beats for front-end GitHub /eckify, Twitter @eckiy 3
5. CULTURE, TEAMS, PROCESSES CULTURE, TEAMS, PROCESSES Lean, agile, Scrum 6 cross-functional teams (CFTs); each with 1 product owner 3+ developers 1 UX designer and ~0.5 visual designer not technology driven 5
6. TECHNOLOGICAL LANDSCAPE TECHNOLOGICAL LANDSCAPE several microservices, monoliths, mobile apps, etc. our web shop Salesforce CommerceCloud (SaaS, f.k.a. Demandware) parts of the code date back >10 years for a long time, only "quick wins" were pursued before ~2015, most development was done by externals and agencies front-end technologies: Bootstrap, JQuery => A lot of technical debt that we are struggling to reduce 6
7. THE JOURNEY THE JOURNEY FROM A LEISURE TIME PROTOTYPE IN 2015 FROM A LEISURE TIME PROTOTYPE IN 2015 TO SITE-WIDE USAGE IN 2017 TO SITE-WIDE USAGE IN 2017
9. LATE 2015: SOURCE OF INFECTION LATE 2015: SOURCE OF INFECTION COMING UP WITH A PROTOTYPE COMING UP WITH A PROTOTYPE Got to know about React Wanted to use it in a project that might come to life Colleagues discussed a shared back-office for our new microservices Wrote a prototype for that at home and showed it at work Implanted the idea of using React Plans for shared back-office were not pursued Code was in a repo and the idea was documented 8
10. EVEN LATER 2015: REACT IN PRODUCTION EVEN LATER 2015: REACT IN PRODUCTION FOR THE FIRST TIME FOR THE FIRST TIME MAINTAINING CUSTOMER REVIEWS MAINTAINING CUSTOMER REVIEWS Mission: deliver customer reviews via microservices Challenge: reviews would not be maintainable in web shop any longer Need for an own back-office! 9
12. EVEN LATER 2015: REACT IN PRODUCTION EVEN LATER 2015: REACT IN PRODUCTION FOR THE FIRST TIME FOR THE FIRST TIME MAINTAINING CUSTOMER REVIEWS MAINTAINING CUSTOMER REVIEWS Convinced co-devs to use (and learn) React Convinced product owner to pay the effort Later I joined a different team... le -alone team overdid it 11
13. MID 2016: FIRST USAGE OF REACT IN THE MID 2016: FIRST USAGE OF REACT IN THE ONLINE SHOP ONLINE SHOP RE-BUILDING CUSTOMER ACCOUNT PAGES RE-BUILDING CUSTOMER ACCOUNT PAGES Newly founded team was to build the customer account area from scratch Green-field approach without dependencies in the front-end No SEO issues to expect (login area) React not required in the standard JS bundle (global loading time not affected) We built some sort of React-SPA inside the web shop 12
15. MID 2016: FIRST USAGE OF REACT IN THE MID 2016: FIRST USAGE OF REACT IN THE ONLINE SHOP ONLINE SHOP RE-BUILDING CUSTOMER ACCOUNT PAGES RE-BUILDING CUSTOMER ACCOUNT PAGES Co-devs and product owner were open and easy to convince We succeeded well in all disciplines We gained trust in mastering new technology 14
16. MID 2017: HARVESTING THE FRUITS OF OUR MID 2017: HARVESTING THE FRUITS OF OUR LABOUR LABOUR A NEW PAGE FOR TRAVEL PRODUCTS A NEW PAGE FOR TRAVEL PRODUCTS New team, new goal: an all-new category page for travel products Again a green field, but some front-end dependencies to deal with Business decided to not have this page indexed yet (-> no SEO concerns) This time, we built not one big, but several small React apps 15
18. MID 2017: HARVESTING THE FRUITS OF OUR MID 2017: HARVESTING THE FRUITS OF OUR LABOUR LABOUR A NEW PAGE FOR TRAVEL PRODUCTS A NEW PAGE FOR TRAVEL PRODUCTS React implementation worked out well (had more experience) The new technology proved its strengths (reuse, flexibility, etc.) -> good for promoting it among devs We underestimated the total effort (not React-related) 17
19. MEANWHILE, IN A DIFFERENT TEAM... MEANWHILE, IN A DIFFERENT TEAM... Another web shop team implemented a new feature with React! Newsletter form in the page footer React was now available all over the web shop Made possible by former improvements on loading time 18
21. MEANWHILE, IN A DIFFERENT TEAM... MEANWHILE, IN A DIFFERENT TEAM... The team kept complexity low and mastered the task The con "another lib to slow down page load" got eliminated The way into the entire shop was smoothened for our new React filters 20
22. TODAY: SPREADING OUR NEW REACT TODAY: SPREADING OUR NEW REACT COMPONENTS ALL OVER THE SHOP COMPONENTS ALL OVER THE SHOP
24. TODAY: SPREADING OUR NEW REACT TODAY: SPREADING OUR NEW REACT COMPONENTS ALL OVER THE SHOP COMPONENTS ALL OVER THE SHOP 2 years have passed 3 teams working with React 5 features/products using React to be continued... 22
25. SUM-UP SUM-UP 23
26. GO AHEAD GO AHEAD Make a personal investment Use leisure time or, better, slack time at work Build a prototype, proof of concept, click-dummy, etc. Show it around your colleagues, spread the word Particularly, win your team mates over What are the strengths of that technology? Why would you use it? How can they learn it? Where to find tutorials, repos, meetups, etc.? Show your passion! Support others using the new technology Offer help, give lessons (e.g. in a Community of Practice) Stick to what you started (like I did... not always) 24
27. ⚽ IDENTIFY AND USE OPPORTUNITIES ⚽ IDENTIFY AND USE OPPORTUNITIES That new technology should support your goals very well Be aware of its advantages as well as of its disadvantages Avoid tasks with too many dependencies in terms of tech AND business Ideally, find a green field or at least a niche Try to sail around some concerns (e.g. loading time, SEO effects, ...) 25
28. CONVINCE BUSINESS GUYS CONVINCE BUSINESS GUYS LIKE YOUR PRODUCT OWNER LIKE YOUR PRODUCT OWNER Point out how the return of investment might look like Improved stability, lower risk for bugs or downtimes Lower development costs for related tasks in the future Your motivation will be higher because of new technology Remember that development costs should not grow too badly You still need your business guy to buy your approach But be honest about higher development costs 26
29. GAIN TRUST AND FOSTER IT ✌ GAIN TRUST AND FOSTER IT ✌ Start small to succeed safely Make sure you can master your task Keep your learning curve low Do not pack too many unknown technologies into the task Watch out to not lose the extra trust you gained by first successes Stay humble, remember not to go too big Do not force the new technology into tasks it won't fit for Always have some patience and wait for the next good opportunity Do good and be seen to do good! 27
30. THANK YOU! THANK YOU! Sebastian Eck | Github /eckify | Twitter @eckify 28