Scalable Web Development with SPA and Vue.js

Less time from dev to deployment
Exciting programming experience
Lean learning curve
Easy to get started from initial setup
No-wait time for compile and run
No-refresh
Good programming pattern

Transcript

1. Disclaimer Presentations are intended for educational purposes only and not to replace independent professional judgement. Statements of facts and opinions expressed here are those of the participant’s personally and do not necessarily reflect those of Blibli.com. Blibli.com does not endorse nor approve, and assumes no responsibility for the content, accuracy or completeness of the information presented.
2. Scalable Web Development with SPA and Vue.js Hidayat Febiansyah hidayat.febiansyah@gdn-commerce.com
3. About me • Hidayat Febiansyah • Principal Research and Development Engineer at Blibli.com (PT. Global Digital Niaga) • Joined Blibli for almost 2 years • A PhD, from Sun Moon Univ, Republic of Korea (South Korea) • Had a deep love with JS • Love to solve puzzles
4. Contents • Scalable Web Development • SPA • Vue.js • What we do in Blibli :) • The products
5. Last year situation.. In Blibli • Our UI bootup required 10-15 mins, if successful • UAT tomcat restart require half an hour • Changing a single value of variable in JS require a restart of tomcat.. Hot redeploy is possible, but needs manual trigger, yet a bit skeptical if the reload is really working • Large amount of code-base, and script deliverables • Requires large amount of engines to render the server • People tend to avoid changing anything in UI, and only one person really knows how checkout page works • UI is the one to blame for delayed projects • And so on
6. We worked so hard.. But why not enough result
7. Then how to be more productive? • Less time from dev to deployment • Exciting programming experience • Lean learning curve • Easy to get started from initial setup • No-wait time for compile and run • No-refresh • Good programming pattern https://www.nhs.uk/Livewell/fitness/PublishingImages/getting%20started%20guides/T_1216_running_618224640_A.jpg
8. Scalable Development • Not about how to scale application, but about improve development speed • You have two options to scale dev: – Scale Up: Find Supermen • Pros: More guarantee of completion, need less resource • Cons: Expensive, hard to find, a lot of orchestrator nowadays - rather than an expert – Scale Out: Find peasants • Pros: It may get done, cheaper, easier to find • Cons: It most probably not done, or at least done in a jumble spaghetti codes. Needs a lot of heads. Adding more heads doesn’t mean it will get done faster vs
9. “A project manager is someone who thinks that 9 pregnant women can create a baby in 1 month” - Anon Can We Scale?
10. SPA • Single Page Application • No browser reload • Page rendered in client, and re-rendered asynchronously using data fetched using AJAX • Imagine GMAIL https://blog.4psa.com/wp-content/uploads/mockup_Single-Page-Interface-Elements-within-a-Page-450x261.png
11. Freedom in SPA • Having an SPA gives you a lot more freedom – Storing application state in client – Simplify server coding – Move application logic to client (less server overhead) – Responsive UI – Fast load UI -> check PWA – Parallel development of backend and frontend – Less complexity in backend
12. Most important thing is.. • No need to put inline JSON data in html • No ambiguity, where the data should be generated, in server or fetched from client X
13. Work separation UI Team Backend Team API Spec • Handle UI logics • Focus on fast load • Filled with js and css enthusiasts • No need to know BE implementation • Business logic • Data validation • Authentication • Data source • Can be implemented in any language platform
14. Vue.js • https://vuejs.org/
15. So.. Why Vue.js? • Less opiniated • Lean learning curve • No need of jsx.. (personal opinion) • Additional Typescript layer is not a must • Fast • Free • Small dist file • Great community support • Etc.. https:// design modo.c om/wp- content /upload s/2016/ 10/VU E20- 3.jpg
16. What we do in Blibli • Modular UI – Split by teams – Multiple repos • SPA using Vue – Load only static to client – Backend is just for data access • Tools: – Webpack with hot reload – ESLint – Unit Testing – Mocking API • Follow PWA Guidelines – https://developers.google.com/web/progressive-web-apps/ – Or use lighthouse • Using history push state
17. Our new Layering https://medium.com/towards-data-science/scalable-web-development-d57a46a7f349 NGINX JAVA
18. Modular UI • Built on modules and components App Shell Member Module Sidebar Components Dynamic content
19. Split Modules by each independent teams Main Layout (App-shell) Member modules Catalog modules Checkout modules /member/ /checkout/ /jual/ /search/ /promo/ Engagement Team Member Team Finance Team Search Team
20. Vue collaborations • Mount multiple Vue instances in a single page • Using Hooks to sync the states • Detect from path, to know which modules to load • Teams can deploy separately, without caring other teams code • Using Vuex to keep global state • Using scoped styling • Asynchronous component load
21. Demo • Multiple project vue https://github.com/havban/multi-project-vue- demo
22. Improvements • Hot-reload with SPA => no need to click Refresh (reduce mouse usage-wear) • Parallel development of FE and BE • Faster delivery, UI used to be the culprit for all the delays • More assurance: Unit testing • Higher throughput, rendering is totally in client • Speed index is around 2000
23. How about SEO ?? • Cool down bro.. • Our neighbor done that already ☺ • You can refer to this doc: – https://webmasters.googleblog.com/2016/11/buildin g-indexable-progressive-web-apps.html – http://searchengineland.com/tested-googlebot- crawls-javascript-heres-learned-220157
24. Go and Fetch as Google
25. The products • Blibli.com pages – Member pages – Travel Pages – Samsung Galaxy Launchpack • On progress: – Digital Product pages – Mobile homepage
26. THANK YOU Any question?
27. Come on board, we need you..