Micro apps across 3 continents

1. 4/1/2017
Micro apps across
three
continents

2. About US:
Matan.defaultProps = {
Role: “Webapps Team Lead @ eXelate, A Nielsen Company",
Emails: [
“matan.av@gmail.com”,
“matan.avneri@nielsen.com"
],
Team: “NCS App”,
Mobile: “052-2490961”,
Tenure: “3 Years @ eXelate”,
Linkedin: “https://www.linkedin.com/in/matan-avneri-b8bb6164" // or just search
}

3. About US:
Vlad.defaultProps = {
Role: “Webapps Team Lead @ eXelate, A Nielsen Company",
Emails: [
“mikxman@gmail.com”,
“vlad.mystetskyi@nielsen.com"
],
Team: “Infra”,
Mobile: “058-5422288”,
Tenure: “1.5 Years @ eXelate”,
Linkedin: “https://www.linkedin.com/in/vlad-mystetskyi-b3413941" // or just search
}

4. About exelate:
● Founded in 2007
○ New York (~100 employees)
○ Israel (~70 employees)
● Big Data company
● Was acquired by Nielsen in March 2015
● eXelate is building the Nielsen Marketing Cloud

5. Agenda
● What we needed to build ?
● Why common solutions like webpack didn’t work for us
● What we built
● Shared components - our internal repos with an open source paradigm
● A deeper look into an app
● Existing problems and our plans ahead

6. Why micro apps and why now ?
6 apps
2000 Nielsen customers200 eXelate customers
12 developers 40 developers across 3 continents
1 app

7. What we needed to build ?
● Multiple apps with UX of one application
● App - set of screens
● Separate repositories
● Deploy independently
● Technology freedom
● Loading on demand
● Adding apps in runtime without rebuilding

8. Why common solution like webpack didn’t work for
usWebpack is created for bundling modules and not applications.
But webpack is cool and we want to use it!
So, what is the solution?

9. What did we buildBrowser
App1
Infra
AppN
…….
Loading on demand with require.js (AMD)
● Loaded on startup (index.html)
● Shared libraries (React, redux, d3, lodash etc.)
● Screen loading on demand
Screen1.js
Screen2.js
Screen3.js
Commons.js
Screen1.js
Screen2.js
Commons.js
● Login/Logout
● Shared components
● Navigation/routing

10. Communication between app and infra
window.Infra.require(‘./BaseScreen’)
window.Infra.require(‘./Router’)

11. Base screen interface

12. Render examples

13. Render examples

14. Render examples

15. Building the app
Each app has the following Webpack config:

16. DEPLOYMENT
S3 bucket
with subfolders
App1: latest.zip
unzip
add cache busting
upload to S3
app1 app2 app3 app4Infra
HTTP API
AWS CloudFront CDN
Deployment service
App1: latest.zip Infra: latest.zip App1: latest.zip App1: latest.zip

17. Apps recommended stack
● React
● Redux
● Less/Sass
● Tape + Enzyme + JSDom

18. Unified UI/UX - Style guide

19. Shared Components
● React Based
● Internal Open Sourced
● 100% Coverage
● Everyone can contribute!

20. React StoryBook

21. How an app is born
● Who am I?

22. How an app is born
● How can I use the shared stuff?

23. How an app is born
● Infra Facade

24. How an app is born
● Tests…

25. How an app is born
● Cook Book
● Use shared components
● CI Pipeline
● 1 Day app in Integration Environment

26. Challenges
● Shared Components Contracts
● App CSS Isolation
● App JS Isolation
● Limited to Infra vendors dependencies

27. Solutions
● Versioning Components
● Integration Environment With Multiple Apps
● Build Time Code Analysis
● Development Conventions

28. We Are Hiring
http://exelate.com/about-us/careers
Our Engineering Blog:
http://engineering.exelate.com/

29. Thanks!