感谢图灵社区的电子书阅读奖励计划。
阅读前的疑问
同构、服务端渲染、首屏直出、前后端分离,这些都是与nodejs
有关的技术,出现在视野中的频率越来越高,也是时候该去了解了。
虽然之前已经知道首屏直出,能够很好的优化用户访问页面的体验,原理是在服务端直接将渲染好的html
返回给浏览器,甚至会将一些关键css
也插入到html
中,实现首屏1s内展现。
服务端渲染(SSR)是在了解vue/react
之后看到的,使用框架存在SEO
的问题,所以出现了服务端渲染,同样是服务器直接将渲染好的页面返回给浏览器,无需在浏览器端获取数据后组装页面。
前后端分离,同样是基于SEO
的考虑,前后端只通过api
交互,于是引入一层nodejs
渲染页面,达到优化SEO
的目的。
这些名词都集中在“服务器渲染页面”这个点上,而同构呢,也是一样吗,和这些名词有什么区别吗,我带着这些疑问阅读这本书,带给我的答案远超我想要的。
书中的同构
简单来说,同构 JavaScript 应用就是在浏览器客户端和 Web 应用服务器端间共享同一套 JavaScript 代码的应用。
共享!代码!
难道同构不是如之前所想,在服务器渲染页面吗?
是,其实服务端渲染就是同构的一种实现?可以为我们带来如下好处:
- SEO
- 减轻服务器负担
- 提高开发速度
- 首屏加载速度
- 纯 JavaScript 技术栈
可以看到有SEO
与首屏加载速度
,同构是更为前沿的方案吗?
如书中所言,同构是更为先进的架构,有趣的是这里提到了架构,在阅读上一本《前端架构设计》时,就感觉前端没有架构,那这里的架构又是指什么呢,前端到底有没有架构呢?
前端架构
严格意义上来说,前端当然是有架构的,当代码量越来越庞大,是必然要有架构来使之便于维护、理解。
但这本书中的架构,是将 web 应用作为一个整体来看待,所以架构是包含了后端,而架构发展如下:
传统 Web -> SPA -> 同构应用
有趣的是作者以一个虚拟的开发者从传统过渡到同构的工作经历来向我们介绍了这一发展,而这也恰恰是这段时间前端开发者的真实写照。
他们具体是什么呢?
传统 Web
即前端写模板,后端套模板的刀耕火种时代,绝大部分逻辑都是在服务器端进行,SEO
是天生的。
SPA
当ajax
如火如荼时,SPA 的概念被提出了,前端有了长足的发展,但之前未出现的SEO
问题被摆上台面。
同构
自豪的宣称自己兼具两者优点。
当然前两者我们已经很熟悉了,SPA
现在正大量存在于我们的世界,同构是我们不熟悉的,但也是我们要熟悉的。
实践
这本书只有第一部分在介绍同构的理论知识,剩下的都是偏实战的内容,对我来说我更想多了解一些理论上的东西,因为还没有机会在正式生产环境使用nodejs
。
如果我当前正在开发一个基于nodejs
的新闻网站(我的同事正在进行的),我绝对会觉得这本书恰逢其时。
第二部分从零开始,介绍了一个同构应用的开发历程,每一步都很详细,甚至作为nodejs
开发的入门例子也是足够了。
2017年11月23日14:58:08 补充
提供的源码已经无法运行,hapi
这个库已经更新,但是自己的官方文档都没有更新,导致要按照作者的步骤无法实现。
而且这个例子并不能很好让读者有代入感,太多的抽象也不适合新手;有经验的就更不想看这些抽象的代码。其实看这本书,更多的是想要了解所谓的“同构”背后的原理,前面大篇幅的代码已经云里雾里,导致想要从中获取到信息非常困难。
真实世界
当然,从零开始基本是不可能的了,无论是react
还是vue
都已经提供了服务端渲染方案,没有必要也没有理由去自己开发。
正因为如此简单能够实现我们的同构应用,于是便会思考,这样做好吗,最佳实践是怎么样的?
这本书提供了一些真实案例供参考,很贴心。
总结
这本书的“干货”很多,无论是想要立即开始实现自己的同构应用,或者说服务端渲染的人,还是对于只想了解什么是同构的人,都能有所收获(当然前者收获会更大),如果有机会,同构应用将会是开发方案的首选。
2017年11月23日14:58:08 补充
只有前面的理论部分有价值,后面的代码已经价值不大了。