我寒假开发的 react spa 博客，和博文推荐（上次发到这的 es6 简版教程搬新家了）

[SimplyY]

介绍

这个属于 作品发布型专题 and 分享型主题，我是前端开发者，这个项目是全栈项目，所有代码托管在 github 上面

github 项目地址（求 star ）： https://github.com/SimplyY/blog

博客已经搭成，里面写了一篇详细介绍（包括内容和技术）地址： http://simplyy.space/article/56cb46564496cee272dea173

我这里写写简单的介绍：内容值得一看、开发方面值得借鉴和学习的。

适合人群

博客文章方面适合编程者， JS 前端学习者， mac 用户。

博客开发方面适合 初学（或想学） node 、初学（或想学） react 的学习，当然非常欢迎大家（大牛们）说说我的项目的不足，可以优化的地方，一些好点子，或者初学者对开发方面知识的提问，都行。

ps ：对了现在 博客不支持手机端的适配，准备用 vue 写手机端的（其实这个项目纯粹是为了练手，老博客也能用，不过技术栈和我现在不一样）但是要准备 2-4 月份的暑假实习生面试了，时间不够，等面试通过来全部完成。

内容方面

精品系列

• es6 简版入门 ： es6 快速上手
• js thinking ： js good part 心得
• clean code note ：写优雅的代码
• mac tips(实用技巧) ： for osx 用户

其他不错的文章

• 编程的优点
• 如何用好 Google 等搜索引擎

开发方面

技术栈

• 后端： express + mongodb + node-restful, 也就是使用 node 遍历文件目录作为文章和标签的数据源，提供 rest api （前端通过 ajax 请求就可以去获取数据）
• 前端： react + react router + redux + es6 + webpack + sass 开发的 spa 博客应用。 大致如此，感谢阅读。

ps ：之前发错节点了，，，

大家就别 star 了，帖子也不能删，真是后悔发帖。

自从学会了 block ，整个世界都变好了。。。

seo 搞定了， react 服务器端渲染，并且通过各种性能优化手段，首屏显示 500ms 内。

[banricho]

好东西，感谢分享

[SimplyY]

ps ：性能优化方面，之前发的节点里有人说打开很快，大体我做了 5 点： 1. webpack 打包，大大 减少 http 请求， 2. 把 js 、 css 资源全部 min + gizp 。 3.libs 放到 cdn 4. react-router spa （单页应用，访问应用内新的 url 时，不需要重新去向服务器发送请求去加载新的 html ） 5.在用 react 渲染页面之前， ajax 只用加载 mustData(也就是分批加载数据，延迟了非必要数据的加载)

[ewBuyVmLZMZE]

速度很快，有意思。

[SimplyY]

@syhily
@banricho 谢谢

[walter]

已顶

[7sDream]

6666666666

让我来学习一哈~

[SimplyY]

@7sDream 感谢 7 神支持⊙▽⊙

[zonghua]

@SimplyY 资源是一次全部加载，还是按需加载？

[SimplyY]

@zonghua 渲染页面之前按需(10kb 左右)，渲染完成后，再加载全部(其实全部也不超过 100kb)，属于分批加载

[SimplyY]

@zonghua 我说的是 ajax 数据请求的方面的，不是所有资源

[zdkmygod]

貌似是一次性把所有博客的内容都放在一个 json 里下载下来，那么如果博客有几千条记录怎么办？

[jarlyyn]

随便问句，怎么解决 seo 的问题？

react 服务器端渲染？

[SimplyY]

@zdkmygod 几千条，我测试了，应该也就几百 kb ，我按需加载的，所以不影响加载速度

[SimplyY]

@jarlyyn seo ， ajax 的有解决方案， react 应该也有，到时候学呗

[jarlyyn]

@SimplyY

如果不解决 SEO 的问题，那么个人觉得，这个 ajax 的 blog 毫无任何意义。

[SimplyY]

@jarlyyn ajax 解决方案我已经解决了， react 才学的，还没看

[SimplyY]

@zdkmygod 博客内容不是一条 json ，是提供了一个 rest api ，可以通过 qureystring 定制 json ，比如只加载十篇最新的这种，也就几 kb 到样子

[xcodebuild]

@jarlyyn 认为搜索引擎对付不了动态内容是老观点了，看这里 http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

[NaG24]

我想知道。编译出来的 js ，怎么做到这么小的？

[SimplyY]

@NaG24 min + gzip 可以缩小十倍 js 体积

[jarlyyn]

@codefalling

首先，搜索引擎并不意味着 google 。

其次。这个文章和 mvvm 的没啥关系。又不只是动态渲染，连路径都是动态虚拟的好不。

具体拿 react 做个项目就知道了。靠 hash 和 route 的还好点，如果是绑定时间的话打死我也想不出搜索引擎怎么收录。所有标签点一遍？

[reverland]

来 V2EX 膜拜下，教我前端带我飞，带我找工作 orz
orz
orz
orz
orz
orz

[xcodebuild]

@jarlyyn "搜索引擎并不意味着 google" 这句话确实对的，这也是服务器端渲染要解决的问题之一。但对个人博客来说基本就是 google 了，我才懒得关心 baidu 收不收录我的博客。

他这也不是 mvvm ，是 react 写的，不太明白你说的“绑定时间”指的是什么。

最后：最大不了上服务器端渲染吧，不至于成为什么致命缺陷

[jarlyyn]

@codefalling

绑定事件。

个人博客基本就是 google 了？大概你不写中文博客可以这么说。多的我也不想说了。说出来撕脸对我也没价值。

另外，你看过他代码了吗？我发评论的时候把大部分代码都看了。连 ajax 的 seo 都没考虑，那么这个基本和各个框架的 blog 范例差不多的 “ blog ”程序价值在哪？

[SimplyY]

@jarlyyn 我准备向耗子学习，被百度收录，是可耻的

[SimplyY]

@jarlyyn ajax ， seo ，不需要前端代码实现，后端用 node 库就 ok ，写一下配置就行，谷歌支持，我只需要支持谷歌罢了

[SimplyY]

@jarlyyn 而且本来就是靠的 router ，绑定时间，，我也不知道你再说什么

[SimplyY]

而且作为个人独立开发的项目，我是只写给自己用的，你上来就说没有意义，我就不知道了，难道我是写给你用的？

我不想被百度收录，而且 seo 对我来说都是次要的，反而我更看重 rss ， rss 我也是放在以后得 todo ，和 seo 一样

而且我也说了我写这个是为了纯粹的练手，

任何的技术难点就是去攻克的，这样才有提高，而不是说不行，然后否定一切。

十几年前，你能想象出 iphone ？

[xcodebuild]

@jarlyyn 我写中文啊=。=我很严肃的说我只考虑 Google 不考虑 Baidu-。-本来博客就是自己随便写点东西,我说的“个人博客”指的只是我的博客不是所有人的个人博客。

另外，即使考虑了 SEO ，难道就不是一个’基本和各个框架的 blog 范例差不多的 “ blog ”程序‘了么，那么你仍然会在下面留下“毫无任何意义”的评价？这只不过是个个人作品， LZ 也没有安利你去使用吧。

[jarlyyn]

@codefalling

大概他没安利别人去 star 么？

[jarlyyn]

@SimplyY

只写给自己的就不要来求 star,谢谢。

技术难点？

提技术难点的花我也太刁难你了。

react 本身的特色之一就是支持服务器段 render 所以我才问了一句。

这代码也算全端了么？好吧，算是吧。

你继续，我滚。

[SimplyY]

@jarlyyn 安利别人，我是说有学习价值，博客里面的文章，博客的代码，这些难道没有学习价值么？，跟博客本身 seo 有什么关系，我对 seo 不看重，这是两码事

[SimplyY]

@jarlyyn 哦，你是这意思，看来你误会我求 star 的意思了，服务端 render 我有说我不去学？以后不写？

[jarlyyn]

@SimplyY

这些有学习价值？

好好看手册和官方范例有价值多了。

我继续滚，也麻烦您不要引用我了。

[SimplyY]

@jarlyyn 还有我也说明了，适合对象，大神，我博客太渣，不适合你

[SimplyY]

@jarlyyn 8

[xcodebuild]

@jarlyyn 说一句求 star 和“安利”还是有区别的，“安利”是不停尝试说服你去 star ，你觉得不足以打动你的项目不 star 即可。
至于求 star 的，这个节点到处都是，大多项目我都没有意愿去 star （真正让我觉得 cool 的我还会推荐给其他人），我需要去剩下的其他项目下都说一句“没有意义”咯？

[jarlyyn]

@codefalling

“当然非常欢迎大家（大牛们）说说我的项目的不足，可以优化的地方，一些好点子，”

呵呵。

[SimplyY]

@jarlyyn 不足不是没有意义，我想起了真阿当喷 vue 作者，我退出中文社区行了吧，大牛？

[SimplyY]

我这种渣渣，又怎么有能力混迹于，中文社区

[SimplyY]

我一时气话，总之比较 sad ，中文社区还是需要大家的力量， V2EX 一直是我认为很不错的地方。

[xcodebuild]

@jarlyyn 同样一句话有很多种方法说。” SEO 需要去做“当然是“项目的不足，可以优化的地方”，“毫无任何意义”却不是。

好了，我本来也无意和你争辩的，现在楼已经被歪出十万八千里了- -。其实在这个节点的不少帖子都能在下面见到人嘲讽（来自您这样高手的也有，来自其实明明什么都不懂的小白的也有）， 我不太明白这种措辞是出于什么原因，因为生活中大多数人还是知道在批判之前先表达自己的善意的。

相比之下 ruby-china 的回复要善意的多，不知道他们是怎么引导这种氛围的。

[jarlyyn]

@SimplyY

我还是你那句话，你继续，我滚。我倒是发现自己越来越不适应 V2EX 了。

另外给你个建议，调整下心态，在论坛上这样对我无所谓。如果你去面试的时候，把这个项目给面试官看的话，面试官问你这两句，你准备怎么办？

当然，我并不会是你的面试官，但脾气也不是那么容易控制的一个东西。

[wentao]

支持大家 好好学习

[jarlyyn]

@codefalling

这点就嘲讽了?

工作中面对上级怎么办？

我上 V2EX 是希望这里质量高。可不希望看到这么多"善意"的回复。

顺便提一句，尊严这玩意，从来不是天生的，是靠自己努力证明的。

你可以继续觉得我不善意，但这句话并不是说给现在的你的。

最后，你们继续，该滚出 V2EX 是我这样的人。

[hustlzp]

好东西！

[kingme]

可以点击 ID ，进去之后 block 。
程序员都有这个毛病，自己最屌，别人都是渣渣。只是有的人会表现出来，二有的人不会。所以把表现出来的人 block 就清净了。

[sox]

@jarlyyn who the hell caring about SEO.

[saga]

对 jxx 此人已 B

[sox]

> 如果不解决 SEO 的问题，那么个人觉得，这个 ajax 的 blog 毫无任何意义。

@jarlyyn 如果不解决 XXX 的问题，那么个人觉得，这个 xxx 的 xxx 毫无任何意义。

Show some respect to OSS. 🙂

[jarlyyn]

@sox

不觉得这东西没意义？那你就直接说这东西的意义就可以了。

另外，谢 b 我的人，最好回个帖子，让我也 b 一下，能节约我宝贵的时间不要看没有价值只会跳着叫 block 的真心不错，难道你们还能发出值得我看的东西吗？

[sox]

@jarlyyn 世界上不是白的就是黑的?

[VmuTargh]

@sox
@saga
@kingme
@SimplyY
我对此人发言一向当猴戏看。

另外我看了一下，项目还不错。居然还是 full-stack ，小小地吃惊了一下。有空学习学习。另外为什么不上 SSL 呢？防劫持啊 XD
PS.域名好有 big ……

[sox]

@jarlyyn

如果 sindre sorhus 来这儿发它的 noop3

'use strict';
module.exports = function noop() {};

肯定被你喷成翔蛤蛤

[sox]

附送 https://github.com/sindresorhus/noop3/blob/master/index.js

[jarlyyn]

@sox

正常人的做法本来就是不发这种奇葩东西。

有没有意义当然是非黑即白的。难道还有可能有意义可能没意义？

[jarlyyn]

@sox

他有发在这求 star 么？

[SimplyY]

@VmuTargh 非常感谢，， ssl 还没空，劫持倒是以前被联通坑过，直接把我的 js 文件改成他的 js ，真恶心（开发 hybird app 的时候），列一个 TODO 去。

[VmuTargh]

@SimplyY 其实 SSL 这玩意一般在前端的 apache/nginx 这些 web server 折腾， nodejs 一般在生产环境当后端。

[sox]

@jarlyyn 你觉得没意义就诋毁有可能对别人产生的意义吗? 😂

那不做开源算啦。

[SimplyY]

@VmuTargh 其实我准备 https ，好多公司也都这么做了，不过都是 TODO ，，，先弄好当下，大三 3 月就要面试暑假实习， sad

[Sequencer]

还是觉得让被 B 的人享有拥有楼层号的权利,不然看了半天才知道那个 jarlyyn 早被 B 了...

[jarlyyn]

@sox

没意义就是没意义。

不是楼主让人评价缺点的么？

直接说要去面试了，求 star ，我还懒的看。

别的不说，我之前把楼主的代码都看过了，源代码就有 demo 数据我也不说啥了。

你看过了吗？

我不但指出来楼主的项目的问题，还提到了 react 可以在服务器渲染，还直接说出了楼主项目最大的问题，没意义。

整个楼里有几个人回复比我价值？

看过代码，提出实际问题的人被要求回答这种政治正确不正确的问题。

这还是个程序员社区？

所以我只能觉得我不适合这里，该滚的人是我了。

你们继续友善去吧，相信有更多的人会冲这友善来这里的。

[WenJimmy]

我觉得回复被 B 的也要隐藏掉~

[sox]

@jarlyyn 动不动就说个滚。。

好吧，我不拦你了。😂

你的思维里 洲际导弹可以打到美国 === 美国会被洲际导弹打到。

这什么时候是个程序员社区了 XD

我的态度对你 并不友善吧。

[jarlyyn]

@sox

这里不是程序员社区，那说明我搞错了，的确该滚。

至于你对我友善不友善，你又不发我工资，我又不要和你谈恋爱，谁关心啊……

[breeswish]

我觉得楼上有人喷的很在理呀， SEO 做不了是很大的缺陷，而需要支持 SEO 则需要架构上重构一部分，工作量也许还不小。这确实是这个项目最大的不足的地方。就是没有友善的说话。

[breeswish]

我也有过项目被说毫无意义的经历，我知道这些评价是基于对评论者、对可能的大多数其他人来说的，项目有很多问题，项目并不能对其他人做出什么贡献，等等。虽然那个项目后来发现还是能帮助很多人的，也就是说最终还是有意义的，但是无论怎么样，它对自己都是有意义的，楼主加油 :-)

[mikicomo]

@jarlyyn 说实话，一个蛮好的意见硬被你说成这样也是蛮不容易的...这世界上没有多大事是好好说解决不了的...

[yibuyisheng]

看到博客中一句话：

但是，大三开始我从后端转前端了。为了增强自己的前端能力（毕竟对于大三寒假，没几个月就要准备去面 BAT 实习生了，虚），于是寒假开始了重写博客， 重点把 es6,react,redux 学习、使用，并对组件开发、 spa 开发从初识到熟练，整个项目轻后端、重前端（后端代码全部也就 400 行的样子，前端合起来 2000 行左右）。

BAT 面试的时候基本不会细问流行框架相关的知识，比较看重的是基础（ html 、 css 、 js ， ES6 可以了解一下吧）知识掌握情况和运用已有基础知识解决实际问题的能力。

[mechanician]

支持一下～看了 blog 觉得题主蛮厉害的啊，求认识～

[SimplyY]

@yibuyisheng 嗯 基础我也认为很重要，寒假看完了两本 css 书， js 书这半年看了五六本。 react 相关生态学习，是阿里小主管的学习建议之一，还说挺重要。

最重要的，我觉得，写项目才会遇到大量实际问题，才能更快提高，这也是我大学自学一直项目驱动的原因，因为些项目，进步真的很快

[SimplyY]

@mechanician github 我参与了一个组织，你可以在我 github 首页看到，右上方第一个，可以在那里面交流认识

[chenyg32]

支持一下

[mechanician]

@SimplyY 右上方…… CoderUnion ？

[SimplyY]

@mechanician 嗯

[isb]

感觉阴影太浓重了 = =。

[isb]

box-shadow: 0 2px 22px #ccc;感觉效果好点

[LeoDev]

赞一个

[SimplyY]

@isb 我俩 color 值用的不一样，我直接用的 grey ，你的和 V2EX 的差不多，（但是萝卜白菜我都试了一下，我喜欢浓一点的。。。。

[jiongxiaobu]

要 seo 加个服务端渲染呗。

[SimplyY]

@jiongxiaobu 恩，谢谢，我估计 3 月底开始新的开发，搞搞服务器渲染

[bramblex]

@codefalling 活捉 OwO

[moxiaonai]

马克

[TheOutgoing]

没有什么话是不能好好说的，没有 seo 就没有价值，这一句就把人辛辛苦苦的努力给无视了。完整写过一遍的人自然懂得艰辛

[blue0125]

为何这么吊？

[yundaren]

重复造轮子，现在不是有 wordpress 已经够完美的了吗

[jarlyyn]

@StephenW

对不起，我用不同语言写过的 cms 还有很多个了。

努力？没价值的努力有什么意义？

写个这种博客很难么？

还艰辛……

[SimplyY]

@yundaren 第一，我说了纯粹练手，第二 WordPress 我不喜欢，我觉得他不完美，，第三造轮子可以显著提升自己，又不是商业项目，为何不能造轮子

[damonzhaofei]

@SimplyY zip 压缩也是自动的么？

[SimplyY]

@damonzhaofei gzip
是服务端开启的，

[SimplyY]

@damonzhaofei min 是 webpack 做的（也就是所谓的自动），我发现很多人弄混了前端 min gzip 的意义，我这里写写。

min 不叫压缩，叫混淆或者精简，比方说把函数名 test 精简 为 a ，所有代码全部变成一行，这样代码体积就小了。一般由自动化工具完成。

压缩一般用 gzip ，是编码行为，我们熟悉的有霍夫曼编码（可以压缩体积），是后端完成的。服务器端响应 http 请求的时候，可以把 response 的内容用 gzip 压缩，然后设置 header 的 Content-Encoding:gzip ，浏览器看到这个 header 后，就会去用 gzip 的方式解压。

个人拙解。

[xcodebuild]

@bramblex 好久不见，你又造了新轮子_(:з」∠)_。你的贴子下语气不善的回复更多（还有人不懂装懂地挑刺），，以至于我都不知道回复啥好就没说了Õ_Õ。

[xcodebuild]

@jarlyyn Talk is cheap.

[reverland]

@SimplyY 能听到有些回复是件幸福的事情，我是这么感觉，虽然也没啥理由。

@jarlyyn 请参照 2015 年 9 月 17 号的日志，这样拉仇恨。。。

[jarlyyn]

@codefalling

对不起，公司盈利点，不能给你代码。

自己随便搭着玩的倒有，没什么脸放出来求 star 的。

https://github.com/jarlyyn/JNodeWeb/

至于意义么也很简单，解决了两个简单直接的问题。

1.按 widget/view 调用数据库数据,方便制作 layout 中共用的需要调用数据库的组建，如最新回复之类。

2.让 express 的 router 更可视化一点。
如

app.post('/api/setpassword',Run(
web.IF(Form.isValidated('setpassword'))(
'setpassword'
),
Http.notFoundIf(
Form.isPending('setpassword'),
Form.isError('setpassword','uid')
),
Form.doJsonErrors('setpassword')
));




写个框架，好要自己实现 orm,测试大概都不用写了？

blog?大概记得 yii 的官网教程就是教人手撸一个 Blog 吧？


不懂装懂？

是有些人半瓶水儿叮当吧。

搞得 V2EX 和什么一样。

大概以为这里是课堂交流作业的地方？

[jarlyyn]

@reverland

看文章不要只看标题。

[SimplyY]

@reverland 之前被人喷蒙了，，内心 sad 了一整天，以至于忘记给学长回复了，我罪大恶极。。。。向曾经启迪过我尊敬的学长致敬。

不过我学会 block 。 block 大法好。。。

[xcodebuild]

@jarlyyn 什么玩意把 node_modules 都提交上去了。。。 @bramblex 的帖子可没有求 star 只是放了传送门，你在这里放传送门我可以理解为求 star 么？

顺便不要说的好像你的项目 0 个 star 是因为你没有宣传的原因一样嘛，半瓶水儿叮当倒是真的，有的人在很多帖子里都叮当叮当，看得懂的也叮当，看不懂的找看懂的部分叮当。


@SimplyY Block 确实是个好东西-。-我也要用起来了

[jarlyyn]

@codefalling

很不幸啊，我某个有 N 多人用的项目也是 0star 。

不是你说 talk is cheap 么，不就是 show me the code 么?

另外，这些 node_moduels 居然不提交？

你知道哪些 Nodejs 项目是要把 node_moduels 加入.gitignore,哪些不加么？

好好做过几个项目？

别人都没说什么你急什么？把这里当成什么地方了?