云时代的前端开发

1. 云计算时代的前端开发使用云平台构建下一代Web应用王伟嘉 Starkwang 腾讯云高级研发工程师

2. 王伟嘉，Starkwang !"#$%&'()*+,-$./0123014567#89:;-<=>?$@AB# CDEFGHIJK93LMNOPQRS89TJUV3W$X')-YZ,$LM [\:]^89:#_`89:a-bc-b&-,,$BdefEghi

3. 01 Web 基础设施之痛

4. Web 开发需要哪些基础设施逻辑数据 jklm wxxy$zy{ ./[\Jn[ |b+}~•€ Qo:pqrstu *•• vv vv 运维工程化问题 “” ‚ƒ„… wxxya †‡…ˆ %ŒX ‰Š‹:Œ-c•}, vv 89‰Ž Qo••J‘’ vv

5. 基础设施的矛盾为了首屏时间、SEO、BFF 等，需要引入 Node 服务 Node服务属于后台开发范畴？ •–—˜ ™šU–›œ •žŸ ? Node服务不属于后台开发范畴？ ¥pq:¦Q {•§•¨©ª «¬-®:¯° ¡¢m£¤ 我们需要一个针对前端场景优化的基础设施！

6. 云计算来了！云计算给 Web 开发带来了什么？ a-bc-b&-,, #‘$Œ-c•}, %ŒX:±²I³ *++a$¾/¿LM “”:´µ ¶·E¸´¹º»¼½

7. Serverless 无运行时 ÀÁLM/ÂÃ3ÄÅÆÇÈÉÊ 弹性伸缩 ËÌÍÎ:˜ÎÏÐ 强隔离性 ¦QÑÒÓ]ÔÕ3Ö×ØÙ 快速迭代 ÄÚÛ9¢ÇÈÜÝ3Þß:àáâãäå

8. Serverless 一个简单的 Query API 实现

9. 边缘接入层（Edge Network）边缘缓存 %ŒXæçèéêq:ëqQoìíîï 基础设施即代码 ðU$ña•X$òóÜÝôõ$%ŒX:öÅ÷© 快速接入 “”èê `ø:Ðòó$wxxya 路由定义文件（示例）

10. 开箱即用的 BaaS 能力

11. ? 有了这些，能做什么？ - 更加“云原生”的 Web 应用架构 - 更加“云原生”的开发工作流 - 更加“云原生”的 Web 框架

12. 02 应用架构篇

13. Web应用的架构，要解决哪些问题？页面渲染域名、CDN、公网接入 HTTP API / BFF 认证与鉴权路由管理监控、数据上报系统

14. 常见的页面渲染 ù úëqûña:wxü€:%aa ù lýjkûw+þ)&-<+b,:ñ+)-:ü(,ÿ+!~-vv ù ®"#$U ù aa% ù %a%$&$aa%$'(

15. 重新审视 SSR ù aa%$)*+EFG,-û!"#$%&'()*+,-.*/.*012+34'.*5&,36 ù "#$.$78$/$9:$/$;<0 ù 1Qo23$#=>$¡45$ • 6 ×7839:×;6 ûÜ<:=÷>:?D@A:BCDE@F • 6 Gd783HTI2I#ûUVJK:x=L-&=þ-:MNpq:ÑOPQ@i$ `Q5$ ù WRSTëq:OU–dVEQo3ðU$SSR WXƒ×Y³EZ ù [úëqö"3QoOU–\]^_Ï›´0$

16. 静态与动态的权衡纯静态页面动态 SSR 页面 ù a\bcjk ù aÂ÷cêqjk ù –îäd3š]°ìíÏ%ŒX ù –îde3ÚÛI³Jöghi ù OU–e3Þß`Uf ù OU–j

17. 能不能充分利用 CDN，把应用完全“静态化”，且不丧失过多的动态性？

18. 云时代的渲染模式 SSG, Static Site Generation SSG 在做什么？ ù 1kBQoëqjk©ëq"# ù QoB6 3lmßn÷jk 对于基建的要求 ù Qoi¹\b£¤oTÖp ù 9¢£¤î…ˆ$%ŒX$ìíEqß

19. 云时代的渲染模式 SSR, SSG 混合模式 ôõ$SSR ÚÛEQo5$ ôõ$SSG ÚÛEQorsjkt5$ LM/jk ëqjk Â÷cn÷ \bcn÷

20. SSG看起来是挺美的，但我的网站有上万个页面，每次数据更新都跑一次全量构建，不现实吧？

21. 增量式渲染 Incremental Site Re-generation, ISR 为什么会有 ISR？ WRu¨övwx3yzQo6Þ{] °jk|}vç3×g~•×€Ñi ISR 在做什么？ ù mÛE"#•÷$aa| ù ×mÛE"#3‚zƒ,„U$%a%3 …¾B†jk`‡Ï$%ŒX 对基建的要求 ù ôˆ E$%ŒX$ˆ‰ ù n[¹Š‹HŒEò(

22. 增量式渲染 Incremental Site Rendering, ISR ôõÚÛsjkE$}+ÿ~,•ÅŽ–"#• ôõ"#QoE’“t” ÅŽ–"#;a\bc•jk©ëq"#3›´ XÅŽ–"#;aÂ÷cn÷•t”3•÷$ ‘dEƒ,–î aa%3–¾1`‡ìíÏ$%ŒX

23. 云时代的“全家桶”：JAMStack JAMStack 的定义？ ù ðU—4n[•÷övEsjk ù p˜$zy{$™$%üa:š›Qoi’“Qo ù ðUœ•t$a++a$LMžŸövE î

24. 一个 JAMStack 的示例 ù ëq¹êq'(•aa%:aa|• ù |=ÿ$6Þ¡9¢£›¤ ù %üa$¥Î6Þ¡9¢£›¤ ù ¦Uœ•t$a++a$îï ù §¨ ù ªñzüaÿ+!«$¬j-E›¤®¯ E$;-<$n[n[•X-©ÿYZ,•

25. 03 云端开发篇

26. 经典的 Web 开发流程本地搭建开发环境这套经典流程有什么痛点？本地开发环境搭建配置代理、联调 ª°±²E³´3µ¶·N§÷ÇÈ3)åâh´9 ¢3¸_™Ð¹º»3HT9¢Ïª¼‘h´½- 依赖一致性问题提交代码 ª‡¾¿ê89º»ÀW’Á3[ÂÃÄÅ2{ÆB Ç},-½- 持续集成灰度、预览能力需要自建 ªß†‡·È9¢N3)ÉÊËÌÍ¨h§O3¸Ú 部署发布 ÛèÎ¹b§ÏÐã î½ª

27. 云将如何改变我们的开发流程？ Cloud IDE 新一代的 Web 部署平台

28. Cloud IDE 业界常见的实现模式远程VM Web Container VSCode Web 浏览器沙盒镜像化开发环境移植 Webpack、Babel 等前端工具链基于开源组件，实现简单目前大都为私有实现镜像启动时间慢极快的启动速度兼容性比较好兼容性需要一定的生态支持

29. Cloud IDE 的核心要素只是好看一些的远程代码编辑器吗？ ù ÇÈÑÊÒ ù ¶· 开发工具 º» • ÓÔ:òó:‡¾‰Ž ù Š‹HŒ¿ÇÈ • 1ÕÖEº»×Ø©šÃÙE$Œ'!«-b>=&- 开发环境依赖 Web化的编辑器 • ËÚE$Œ'!«-b>=&-$Û–C`ËÚE89º» 环境定义文件环境配置

30. 基于 Cloud IDE 的开发工作流选择基础镜像基础操作系统 Node 版本依赖定义文件相关工具版本配置文件（代理、DB）在浏览器中编辑代码提交、持续集成部署新版本只需要更改业务代码，无需搭基于Git分支、版本号灰度？建开发环境，所⻅即所得构建出产物预览、预发布？回滚？

31. 云上部署平台

32. 云原生的 Web 托管平台 - CDN、静态托管 - 持续集成、发布 - 域名、HTTPS - 路由能力 - 与第三方 Git 平台的打通 - Serverless 计算 - 原子化部署、流量管控

33. 云原生的 Web 托管平台原子化版本、Preview 模式 ù ÓÜR#®¯W$%ŒX:0ÝÞß:žàEá…3š ^¯âÑ€ª_ã †‡-3¿yz9¢{;C`§ }]ßE“”i ù BN_ã E†‡3µÍš^¥0ä¾9¢Ï€ö3 åà®¯æçEÐã:sèîïÑ€éêE9¢i

34. 云原生的 Web 托管平台极速上线 Web 应用选择一个模板自动识别框架或或从 Git 仓库导入自定义构建发布配置云端构建发布成功自动分配默认域名： xxx.app.tcloudbase.com

35. 完全的云上开发？ Web IDE Git 仓库云上部署平台用户

36. 04 总结篇

37. Web 框架将走向何方? 回顾历史云原生的一体化框架 ]ÏLM*+tu:‰Š‹ Meta 框架 pUE$U89òm Web 框架 ïð$Œ•ü$ñŠ3#T$U89 jQuery 原生 JS *+ëèÒìÎ–,-3í®ëèÒîe‚

38. Web 框架将走向何方? 云原生的一体化框架 ù #_` • #Tß§ÇE#‘ŠbHI • Ðòó:a-bc-b&-,, • í®Šbe‚3óô®¯õô ù §¨ • íÁ.¾/e‚3§öÇÈ.¾/Â÷ • ø÷E8iøÝEø(J¼¦ • 89TÄùún[‡û Redwood.js 示例

39. 业界现状 Web 托管平台 Cloud IDE 一体化框架 RedwoodJS

40. 业界现状 ù ;-<$Š‹n[ügø¨3ý–STRéôF ù ‘þE$ü-ÿ+$n[a×ÿ!•"3#T#ô«¬3J#‘®¯B§ôEõôF ù $a-bc-b&-,,$Šb$Tø÷3[¸ÚÛ§%OîaOP&']#(8F ù #_`E$;-<$89)*+,3´.¸-R./01E2%3n[:®¯:tu;3435i$

41. 感谢倾听大会官网