让这三个月来的更猛烈些吧,前端react同构项目

昨天一篇文章讲述了我在这三个月中由.net到java的过程,其中踩坑填坑的细节真不是三言两语可以道尽,而完成时的喜悦也远非寻常可比(仅次于涨工资)。然而到这并不算完结,作为前后端分离的忠实粉丝,我认为服务端更应关心数据处理、存储、负载、并发等问题,而与页面相关的开发诸如渲染、操作、样式、动画等都应交由前端人员处理。

作为一个常年在服务端玩耍的打怪青年,如果几年前有人告诉我说要把我的视图页拿出去单独开发,我会认为他在开玩笑,然而随着这几年前端超级无敌迅速的发展,前端的框架、构建工具、包管理器等不断的完善,前端开发进入了一个工程化的时代,甚至可以说现在的前端和移动端app是等价的,只是其运行的载体不同而已,所以前后端分离模式就变得可行,也很优雅。

前端技术选型

前端的框架、工具什么的实在太多了,近乎乱象,然而这并不影响什么,选择并没有想象中的那么艰难,因为真正需要选择的东西只有一个:框架。对于目前比较火热的三大前端框架angular、react和vue。angular因为个人喜好问题被首先排除,所以我仅仅需要react和vue中二选一即可,最终我们选择了react。接下来就是针对react的深度学习了,期间涉及到的技术包括:react.js、es6、webpack、babel、fetch等。由于之前为BodeAbp项目写过一个react的前端,所以这块知识我还算熟悉。

SEO带来的伤痛

熟悉前端开发的小伙伴大概知道,现在这些前端框架除了数据绑定、模块化、虚拟dom等功能特性之外,还可以结合前端路由实现单页应用(spa),单页应用能给我们带来更好的页面性能和用户体验。但是,有利就有弊,我想这个世界上就没有任何一个东西是完美的吧,单页应用程序在seo方面的表现实在是差强人意(谷歌除外),而对于一个平台性质的网站,这是不能容忍的问题。

同构

seo问题是必须要解决的,然而我搜遍了国内外各种网站找到的解决方案都是:ssr(server side render),即服务端渲染,感觉绕来绕去又回到了原地,得益于nodejs的迅速发展以及react对于服务端渲染的支持,使得这个问题可以比较优雅的得到解决,也就是前端所谓的同构方案,什么是同构?同构JavaScript应用指的是用JavaScript编写的应用,能够同时运行于客户端和服务器。这里盗用一张图方便理解:

感谢Github的强大,感谢https://github.com/kriasoft/react-starter-kit项目给我带来的启发,我最终在该项目的基础上修改出了我需要的项目结构。再一次站在了巨人的肩膀上看了一眼前端的世界,欣赏美景的同时也丰富了自身。最后再推荐一下这篇讲解服务端渲染的文章:http://www.jianshu.com/p/0ecd727107bb,这是我找到的最好最全面的讲解ssr的文章了。

写在最后

目前这个项目已经正式用于开发,react的模块化机制被使用的淋漓尽致,一个页面由各种不同的组件拼接而来,组件得到了很好的复用。ssr给我们带来了伤痛的同时也给我们带来了一些好处,比如可以在服务端请求首屏数据,其他数据在客户端请求,加快首屏渲染速度的同时也不影响用户体验。最后还是将业务代码删除后把项目放上了Github,有兴趣的可以看看:https://github.com/liuxx001/cczcrv-react

还原包命令:yarn install;项目启动命令:npm start

ps:为什么前端框架也需要我来搭,这真是一个忧伤的问题。

时间: 2025-01-01 08:45:10

让这三个月来的更猛烈些吧,前端react同构项目的相关文章

张书乐:BATJ联姻银行:智慧银行会来的更猛烈些吗?

几乎一夜之间,一直有些势成水火的主流互联网金融平台,都分别和四大国有银行牵上了手. 2017年3月28日,阿里巴巴集团.蚂蚁金服集团和中国建设银行签署了三方战略合作协议:6月16日,工商银行牵手京东刘强东进行全面合作,6月20日,百度与农业银行宣布达成战略合作:6月22日,腾讯则下了个"双黄蛋",同一天与中国银行和华夏银行均签战略合作协议-- 至此,互联网(不限于金融)领域俗称的BATJ(百度.阿里.腾讯.京东)与四大国有银行工.农.中.建,均结成了互助对子. 科技金融还是金融科技,这

让0元包邮免费送来得更猛烈些吧!!!

这段时间,老衲的朋友圈,时常被各种0元包邮免费送的信息刷爆了屏. “森天地灵芝孢子粉100克 天猫店0元包邮免费送!” “绿箭侠洗车水枪套装,天猫店0元免费送” “夏季男士短袖纯棉衬衣 前10名免单!速抢!!!” 0元包邮免费送!这是什么时候开始的全民盛宴?竟然让这么多人为之疯狂! 这到底是为什么呢?老衲要去一探究竟才行! 点击这些0元包邮免费送的链接,都是进入到这个地方,看来0元包邮送的东西还真不少! 然后老衲我再随便点击,进入一个0元包邮免费送的东西里面. 按照上面的活动说明,在淘宝找到了传

让HTML5游戏来的更猛烈些吧!--青岛思途

作为著名的网页游戏门户,Kongregate在业界也算是鼎鼎大名了.小编与它的初识应是在几年前,只记得当时其平台上的游戏基本都是需要Flash的支持,可前几天,Adobe宣布计划停止Flash的更新和支持的消息,则让小编真真的为Kongregate捏了一把汗,没有Flash它还能活吗? 一份十年数据报告也是在前不久,Kongregate发布了一份十年数据报告,从数据上来看,自2011年起,登录该站的网页游戏种类发生了急剧变化:而自2014年起,HTML5类游戏开始正式入侵!而截至目前,HTML5

如果说我比别人走得更远些,那是因为我站在了巨人的肩上.

注意:本文内容全部来自各路大神不是本人原创,我会在每段转载开始注明作者,如有问题请及时联系我! 阅读体系: 1.NET学习方法 2.NET知识体系 3.NET系列笔记 4.NET源码研究 5.NET职业进阶 1.NET学习方法 1.[你必须知道的.NET]第二十回:学习方法论 http://www.cnblogs.com/anytao/archive/2008/05/28/must_net_20.html作者anytao. 2.NET知识体系 1.NET知识体系结构图http://www.cnb

android开发时如何让svn更快些

因为和git比起来,svn更熟悉些.就先用的svn来做版本管理,反正就几个人,没什么离线提交的需求. 参考https://oomake.com/question/984356,我有了一些实践. 如果仅仅是export,您可以使用GNU Parallel进行并行svn签出. 例- svn ls 'https://foo/bar' | parallel svn export 'https://foo/bar/'{} 这将在'bar'目录下启动并行svn签出. 要是co,和update time sv

让EFCore更疯狂些的扩展类库(一):通过json文件配置sql语句

前言 EF通过linq和各种扩展方法,再加上实体模型,编写数据库的访问代码确实是优美.舒服,但是生成的sql不尽如意.性能低下,尤其是复杂些的逻辑关系,最终大家还是会回归自然,选择能够友好执行sql语句的ORM,认认真真的编写sql:问题是:EF是否也能够很友好的执行sql语句?EF提供直接执行sql语句的方法并不多,而且也是极其简单的:那是否容易进行扩展?答案是肯定的,在DbContext下提供了Database属性就是为了执行sql用的,然后自己就通过Database下的方法属性进行了扩展(

这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧。。。

长期关注和使用.NET开源项目,给我带来了很多好处: 1.可以快速完成我的想法,也就是所谓的业务细节,而不是关注如何实现: 2.可以更快更稳定的完成需求,而不是自己造轮子实现,花费时间: 3.从.NET开源项目的使用以及源码阅读中也会带来一些好处: 实际上并不是说造轮子不好,而是本来技术功底和专业水平就不够,实在造不了.所以感谢开源社区,感谢C#,感谢那些参与和共享开源项目代码的人,有了你们,我才进步更快.08年比较正式开始接触C#并用来完成研究所阶段所需要的任务以来,接触过很多开源项目,特别是

让 Sublime Text 2 更漂亮些,Mac皮肤优化

1,文章写的挺好 http://www.oschina.net/translate/making-sublime-text-2-beautiful 可惜,没有写操作. https://github.com/mrappleton/aqua-theme 相同的项目还有: https://github.com/buymeasoda/soda-theme (最后使用的是这个) 还好github上面有文档. 2,操作 进入Sublime Text2 目录: $ cd ~/Library/Applicati

让EFCore更疯狂些的扩展类库(二):查询缓存、分部sql、表名替换的策略配置

前言 上一篇介绍了扩展类库的功能简介,通过json文件配置sql语句 和 sql语句的直接执行,这篇开始说明sql配置的策略模块:策略管理器与各种策略的配置. 类库源码:github:https://github.com/skigs/EFCoreExtend 引用类库:nuget:https://www.nuget.org/packages/EFCoreExtend/ PM> Install-Package EFCoreExtend 策略管理器功能简介 用于管理策略 与 策略执行器和调用(目前分