ConFoo Presentation - Front-End Architecture
•
0 likes•224 views
Presentation about Front-End Architecture in a large and scaling organization with multiple product teams.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to ConFoo Presentation - Front-End Architecture
Similar to ConFoo Presentation - Front-End Architecture (20)
Recently uploaded
Recently uploaded (20)
ConFoo Presentation - Front-End Architecture
- 1. Confidential • Do Not Distribute Software Engineer @ Squarespace @KarimBaaba Interface Architecture Karim Baaba
- 2. Fighting JavaScript with JavaScript March 8th, 2018
- 3. A Tale of Java Script
- 5. 2018 @frank_chimero “simply npm your webpack via grunt with vue babel or bower to react asdfjkl;lkdhgxdlciuhw”
- 6. LET’S BUILD SOME $%^&!
- 9. “A COMPLEX SYSTEM THAT WORKS IS INVARIABLY FOUND TO HAVE EVOLVED FROM A SIMPLE SYSTEM THAT WORKED. A COMPLEX SYSTEM DESIGNED FROM SCRATCH NEVER WORKS AND CANNOT BE PATCHED UP TO MAKE IT WORK. YOU HAVE TO START OVER WITH A WORKING SIMPLE SYSTEM.” — Gall's law
- 10. PUSH / PULL
- 11. 01 Dependency Management 02 Shared Components Library 03 Start tracking EVERYTHING 04 Optimize last PUSH TRUST THE PROCESS
- 12. GRAPH TITLE NPM PackagesDependency Management
- 14. Tracking
- 15. Tracking
- 17. Optimize
- 18. SPEED KILLS - latency Google: 100ms costs 4% decrease in traffic Amazon: 100ms costs 1% decrease in sales Speed Matters* Optimize
- 19. Optimize
- 20. 01 Education & Feedback 02 Contracts & Versions Pipeline Driven PULL JavaScript with JavaScript
- 21. LINT THE $%^& OUT OF EVERYTHING Education & Feedback
- 22. // Lint error on build const { isNumber } = require('lodash'); import { isNumber } from 'lodash'; // Good const isNumber = require('lodash/isNumber); import isNumber from 'lodash/isNumber'; Education & Feedback
- 23. NO TOOL IN THE BOX Education & Feedback
- 24. // No Bueno - Lint error on build delete window.some_prop; // Go-ahead try { delete window.some_prop; } catch (e) { // handle error } Education & Feedback
- 25. - Abstract Syntax Tree - Data Structure for Compiler & Parsers - Static Analysis - Core of Babel & ESLint - Write JavaScript with JavaScript What’s an AST? JavaScript from JavaScript
- 26. GRAPH TITLE
- 27. 'UnaryExpression:exit'(node) { // Check if we're inside a try/catch // UnaryExpression -> ExpressionStatement -> BlockStatement -> TryStatement if ( node.parent.parent.type === 'BlockStatement' && node.parent.parent.parent && node.parent.parent.parent.type === 'TryStatement' ) { return; } if ( node.operator === 'delete' && node.argument.type === 'MemberExpression' && node.argument.object.type === 'Identifier' && node.argument.object.name === 'window' ) { context.report( node, 'Deleting protected window properties in Safari 9.x throws a TypeError. Wrap statement in try/catch.' ); } } Education & Feedback
- 29. return ( <div>Hello World</div> ); const hello = 'world'; const obj { hello: 'world', }; return ( <div><T>Hello World</T></div> ); const hello = t('world'); const obj { hello: t('world'), }; Contracts & Versions
- 31. Contracts & Versions // NEW API const hello = t( 'world', { project: 'confoo.1', notes: 'used on home page' } );
- 34. THANK YOU
- 35. Q&A