BCP Frontend Overhaul

Transcript

1. Part 1 Faster JS Unit tests
2. Problem: PhantomJS is slow Solution: Run tests in NodeJS
3. How? • Write modules in ES2015 syntax • Use Babel transpiler plugin • AMD for browser use • CommonJS for tests in NodeJS
4. AMD (browser) ES2015 (source) CommonJS (Node tests)
5. • Compatibility: • Can be used with current RequireJS setup • Only .es6 files are treated this way • Ease of use: Same module, slightly different syntax • Org patterns: Easier and faster testing
6. Pro: Con: •Can’t test DOM modifications •Fast (3-5s startup vs minutes for PhantomJS) •IntelliSense! •Can even test some KnockoutJS components
7. What if we didn’t need to test DOM modifications? Part 2:
8. Flux Architecture: Unidirectional data flow Departure from MVC and MVVM The DOM is an output! State State+1 Event DOM DOM Output What we care about
9. Redux Dataflow State+1 Reducer State Event Plain JS objects Pure function • Single source of truth • State is read-only • Mutations are written as pure functions
10. Compatibility • Can use existing RequireJS module system • Old browser support at low cost (thanks Facebook) Ease of use • Clear cause and effect of actions, no side effects • Devtools encourage good use of framework Patterns • Will allow server-side rendering • Can use existing page.js pattern • Redux is inherently unit-testable
11. React Redux Helpful warnings: Devtools
12. Performance • React + Redux = 135kb • Rendering is comparable to Angular and KO
 Community • Created by Facebook, in prod for 2+ years • 31k Stars on Github, thriving community • Used by Facebook, Instagram, Airbnb, Khan Academy, Atlassian, Codecademy, Intuit, Netflix, Uber, Venmo, Yahoo
13. Status • Basic keyword and category search is functional • It’s ugly, no UX yet • Code lives in bcp-core-web/feature/search-poc
14. Questions?