Google 内部是如何实施大规模前端项目的

微风

2019/03/24 发布于 技术 分类

文字内容
1. QCon 分享
3. 关于我 • 在google plus frontend infra干过三年 • 主要负责写各种前端工具, 维护google css compiler • 其他的google时间花在了MapReduce team cloud team Security team
5. Almost everything happens in Google doesn't apply to the outside
6. 该演讲希望传达的观点 • 讲讲故事,大家听听就算了
7. 激进 vs 保守
8. 前端技术最激进的公司,没有之一 • maps: world’s first truly Ajax application • gmail: hundred millions lines of javascript code • spreadsheet: complex formula calculation in browser
9. 前端技术最激进的公司,没有之一 • Offline docs: combine appcache and browser storage to offer native application experience • adword frontend: GWT • wave: GWT
10. 这些流行的事情和G基本无关 • node • npm • web pack • es6 • less • babel • AMD • …
11. G’s world • plain javascript • closure • • closure js • closure template • closure style* gwt • compile java to js • angular • polymer • …
12. 90% of js code in google looks like this • no fancy technology, highly engineering oriented
13. Google loves Java, not JS
14. All code MUST look the same
15. • 技术 • 工具 • 组织架构
16. 技术层面
17. 一些可能是比较特殊的技术 • dead code removal
18. 一些可能是比较特殊的技术 • dead code removal
19. 一些可能是比较特殊的技术 • dead code removal (bad)
20. 一些可能是比较特殊的技术 • collapse object properties
21. 一些可能是比较特殊的技术 • collapse object properties
22. 一些可能是比较特殊的技术 • collapse object properties
23. 一些可能是比较特殊的技术 • consistent css renaming across js/css/template
24. 一些可能是比较特殊的技术 • consistent css renaming across js/css/template
25. 一些可能是比较特殊的技术 • Google’s react native • Strictly model – view – controller • Embed a V8 in native app • Reuse Model and Controller code in native app across android and ios • Model and Controller are much more complex than view
26. 工具层面
27. Protobuf to JS
28. gJs lint
29. Js automation test • Unit test • Integration test • Continuous run
30. JS stack trace deobfuscation • Client catches all exceptions • Send back to server • Server deobfuscate the stack, automatically generates bug and assign to engineers
31. 组织架构层面
32. 基础设施团队 • different framework team • closure team • closure compiler team • gwt team • angular team
33. 产品相关的前端团队 • google+ frontend infrastructure team • news feed team • profile team • …
34. 很多技术都来源于产品的实践 • Gmail —-> Closure • Google+ —> Wiz(react/angular like js framework)
35. 结尾
36. • 严格的执行这些规则需要一个非常强的JS基础架 构团队 • 实际实施的过程中,可能会打折再打折 • 过度的实施这些技巧反而会降低团队的生产力