推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
我寒假开发的 react spa 博客，和博文推荐（上次发到这的 es6 简版教程搬新家了）
SimplyY · 2016-02-23 13:59:20 +08:00 · 10210 次点击这是一个创建于 3181 天前的主题，其中的信息可能已经有所发展或是发生改变。
介绍
这个属于 作品发布型专题 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 用户
其他不错的文章
开发方面
技术栈
- 后端： express + mongodb + node-restful, 也就是使用 node 遍历文件目录作为文章和标签的数据源，提供 rest api （前端通过 ajax 请求就可以去获取数据）
- 前端： react + react router + redux + es6 + webpack + sass 开发的 spa 博客应用。 大致如此，感谢阅读。
ps ：之前发错节点了，，，
第 1 条附言 · 2016-02-23 19:39:24 +08:00
大家就别 star 了，帖子也不能删，真是后悔发帖。
第 2 条附言 · 2016-02-24 21:35:40 +08:00
自从学会了 block ，整个世界都变好了。。。
第 3 条附言 · 2016-04-03 12:02:04 +08:00
seo 搞定了， react 服务器端渲染，并且通过各种性能优化手段，首屏显示 500ms 内。
 |
1
banricho 2016-02-23 14:00:48 +08:00 via Android  1
好东西，感谢分享
|
 |
2
SimplyY OP 1
ps ：性能优化方面，之前发的节点里有人说打开很快，大体我做了 5 点： 1. webpack 打包，大大 减少 http 请求， 2. 把 js 、 css 资源全部 min + gizp 。 3.libs 放到 cdn 4. react-router spa （单页应用，访问应用内新的 url 时，不需要重新去向服务器发送请求去加载新的 html ） 5.在用 react 渲染页面之前， ajax 只用加载 mustData(也就是分批加载数据，延迟了非必要数据的加载)
|
 |
3
ewBuyVmLZMZE 2016-02-23 14:05:41 +08:00
速度很快，有意思。
|
 |
5
walter 2016-02-23 14:10:47 +08:00
已顶
|
 |
6
7sDream 2016-02-23 14:29:45 +08:00
6666666666
让我来学习一哈~ |
|
9
SimplyY OP 1
@zonghua 渲染页面之前按需(10kb 左右)，渲染完成后，再加载全部(其实全部也不超过 100kb)，属于分批加载
|
 |
11
zdkmygod 2016-02-23 15:14:11 +08:00
貌似是一次性把所有博客的内容都放在一个 json 里下载下来，那么如果博客有几千条记录怎么办？
|
 |
12
jarlyyn 2016-02-23 15:16:43 +08:00
随便问句，怎么解决 seo 的问题？
react 服务器端渲染？ |
|
17
SimplyY OP @zdkmygod 博客内容不是一条 json ，是提供了一个 rest api ，可以通过 qureystring 定制 json ，比如只加载十篇最新的这种，也就几 kb 到样子
|
 |
18
xcodebuild 2016-02-23 16:54:49 +08:00 1
@jarlyyn 认为搜索引擎对付不了动态内容是老观点了，看这里 http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
|
 |
19
NaG24 2016-02-23 17:21:45 +08:00
我想知道。编译出来的 js ，怎么做到这么小的？
|
|
21
jarlyyn 2016-02-23 18:14:18 +08:00
@codefalling
首先，搜索引擎并不意味着 google 。 其次。这个文章和 mvvm 的没啥关系。又不只是动态渲染，连路径都是动态虚拟的好不。 具体拿 react 做个项目就知道了。靠 hash 和 route 的还好点，如果是绑定时间的话打死我也想不出搜索引擎怎么收录。所有标签点一遍？ |
 |
22
reverland 2016-02-23 18:18:05 +08:00
来 V2EX 膜拜下，教我前端带我飞，带我找工作 orz
orz orz orz orz orz |
|
23
xcodebuild 2016-02-23 18:36:04 +08:00
@jarlyyn "搜索引擎并不意味着 google" 这句话确实对的，这也是服务器端渲染要解决的问题之一。但对个人博客来说基本就是 google 了，我才懒得关心 baidu 收不收录我的博客。
他这也不是 mvvm ，是 react 写的，不太明白你说的“绑定时间”指的是什么。 最后：最大不了上服务器端渲染吧，不至于成为什么致命缺陷 |
|
24
jarlyyn 2016-02-23 18:54:25 +08:00
@codefalling
绑定事件。 个人博客基本就是 google 了？大概你不写中文博客可以这么说。多的我也不想说了。说出来撕脸对我也没价值。 另外，你看过他代码了吗？我发评论的时候把大部分代码都看了。连 ajax 的 seo 都没考虑，那么这个基本和各个框架的 blog 范例差不多的 “ blog ”程序价值在哪？ |
|
26
SimplyY OP @jarlyyn ajax ， seo ，不需要前端代码实现，后端用 node 库就 ok ，写一下配置就行，谷歌支持，我只需要支持谷歌罢了
|
|
28
SimplyY OP 而且作为个人独立开发的项目，我是只写给自己用的，你上来就说没有意义，我就不知道了，难道我是写给你用的？
我不想被百度收录，而且 seo 对我来说都是次要的，反而我更看重 rss ， rss 我也是放在以后得 todo ，和 seo 一样 而且我也说了我写这个是为了纯粹的练手， 任何的技术难点就是去攻克的，这样才有提高，而不是说不行，然后否定一切。 十几年前，你能想象出 iphone ？ |
|
29
xcodebuild 2016-02-23 19:16:00 +08:00
@jarlyyn 我写中文啊=。=我很严肃的说我只考虑 Google 不考虑 Baidu-。-本来博客就是自己随便写点东西,我说的“个人博客”指的只是我的博客不是所有人的个人博客。
另外，即使考虑了 SEO ，难道就不是一个’基本和各个框架的 blog 范例差不多的 “ blog ”程序‘了么，那么你仍然会在下面留下“毫无任何意义”的评价？这只不过是个个人作品， LZ 也没有安利你去使用吧。 |
|
30
jarlyyn 2016-02-23 19:16:58 +08:00
|
|
31
jarlyyn 2016-02-23 19:19:23 +08:00
@SimplyY
只写给自己的就不要来求 star,谢谢。 技术难点？ 提技术难点的花我也太刁难你了。 react 本身的特色之一就是支持服务器段 render 所以我才问了一句。 这代码也算全端了么？好吧，算是吧。 你继续，我滚。 |
|
32
SimplyY OP @jarlyyn 安利别人，我是说有学习价值，博客里面的文章，博客的代码，这些难道没有学习价值么？，跟博客本身 seo 有什么关系，我对 seo 不看重，这是两码事
|
|
33
SimplyY OP @jarlyyn 哦，你是这意思，看来你误会我求 star 的意思了，服务端 render 我有说我不去学？以后不写？
|
|
37
xcodebuild 2016-02-23 19:23:45 +08:00
@jarlyyn 说一句求 star 和“安利”还是有区别的，“安利”是不停尝试说服你去 star ，你觉得不足以打动你的项目不 star 即可。
至于求 star 的，这个节点到处都是，大多项目我都没有意愿去 star （真正让我觉得 cool 的我还会推荐给其他人），我需要去剩下的其他项目下都说一句“没有意义”咯？ |
|
38
jarlyyn 2016-02-23 19:24:54 +08:00
|
|
39
SimplyY OP @jarlyyn 不足不是没有意义，我想起了真阿当喷 vue 作者，我退出中文社区行了吧，大牛？
|
|
40
SimplyY OP 我这种渣渣，又怎么有能力混迹于，中文社区
|
|
41
SimplyY OP 我一时气话，总之比较 sad ，中文社区还是需要大家的力量， V2EX 一直是我认为很不错的地方。
|
|
42
xcodebuild 2016-02-23 19:44:51 +08:00
@jarlyyn 同样一句话有很多种方法说。” SEO 需要去做“当然是“项目的不足，可以优化的地方”，“毫无任何意义”却不是。
好了，我本来也无意和你争辩的，现在楼已经被歪出十万八千里了- -。其实在这个节点的不少帖子都能在下面见到人嘲讽（来自您这样高手的也有，来自其实明明什么都不懂的小白的也有）， 我不太明白这种措辞是出于什么原因，因为生活中大多数人还是知道在批判之前先表达自己的善意的。 相比之下 ruby-china 的回复要善意的多，不知道他们是怎么引导这种氛围的。 |
|
43
jarlyyn 2016-02-23 19:46:27 +08:00
@SimplyY
我还是你那句话，你继续，我滚。我倒是发现自己越来越不适应 V2EX 了。 另外给你个建议，调整下心态，在论坛上这样对我无所谓。如果你去面试的时候，把这个项目给面试官看的话，面试官问你这两句，你准备怎么办？ 当然，我并不会是你的面试官，但脾气也不是那么容易控制的一个东西。 |
 |
44
wentao 2016-02-23 19:48:57 +08:00 via Android
支持大家 好好学习
|
|
45
jarlyyn 2016-02-23 19:49:57 +08:00
@codefalling
这点就嘲讽了? 工作中面对上级怎么办？ 我上 V2EX 是希望这里质量高。可不希望看到这么多"善意"的回复。 顺便提一句，尊严这玩意，从来不是天生的，是靠自己努力证明的。 你可以继续觉得我不善意，但这句话并不是说给现在的你的。 最后，你们继续，该滚出 V2EX 是我这样的人。 |
 |
46
hustlzp 2016-02-23 19:56:00 +08:00
好东西！
|
 |
47
kingme 2016-02-23 19:57:13 +08:00 1
可以点击 ID ，进去之后 block 。
程序员都有这个毛病，自己最屌，别人都是渣渣。只是有的人会表现出来，二有的人不会。所以把表现出来的人 block 就清净了。 |
 |
49
saga 2016-02-23 20:26:12 +08:00
对 jxx 此人已 B
|
 |
50
sox 2016-02-23 20:32:10 +08:00
> 如果不解决 SEO 的问题，那么个人觉得，这个 ajax 的 blog 毫无任何意义。
@jarlyyn 如果不解决 XXX 的问题，那么个人觉得，这个 xxx 的 xxx 毫无任何意义。 Show some respect to OSS. 🙂 |
|
51
jarlyyn 2016-02-23 20:38:59 +08:00 via Android
@sox
不觉得这东西没意义？那你就直接说这东西的意义就可以了。 另外，谢 b 我的人，最好回个帖子，让我也 b 一下，能节约我宝贵的时间不要看没有价值只会跳着叫 block 的真心不错，难道你们还能发出值得我看的东西吗？ |
 |
53
VmuTargh 2016-02-23 20:41:36 +08:00
|
|
54
sox 2016-02-23 20:45:42 +08:00
|
|
55
sox 2016-02-23 20:47:13 +08:00
|
|
56
jarlyyn 2016-02-23 20:48:12 +08:00 via Android
|
|
58
SimplyY OP @VmuTargh 非常感谢，， ssl 还没空，劫持倒是以前被联通坑过，直接把我的 js 文件改成他的 js ，真恶心（开发 hybird app 的时候），列一个 TODO 去。
|
|
59
VmuTargh 2016-02-23 20:52:03 +08:00
@SimplyY 其实 SSL 这玩意一般在前端的 apache/nginx 这些 web server 折腾， nodejs 一般在生产环境当后端。
|
|
61
SimplyY OP @VmuTargh 其实我准备 https ，好多公司也都这么做了，不过都是 TODO ，，，先弄好当下，大三 3 月就要面试暑假实习， sad
|
 |
62
Sequencer 2016-02-23 20:56:33 +08:00
还是觉得让被 B 的人享有拥有楼层号的权利,不然看了半天才知道那个 jarlyyn 早被 B 了...
|
|
63
jarlyyn 2016-02-23 21:00:10 +08:00 via Android
@sox
没意义就是没意义。 不是楼主让人评价缺点的么？ 直接说要去面试了，求 star ，我还懒的看。 别的不说，我之前把楼主的代码都看过了，源代码就有 demo 数据我也不说啥了。 你看过了吗？ 我不但指出来楼主的项目的问题，还提到了 react 可以在服务器渲染，还直接说出了楼主项目最大的问题，没意义。 整个楼里有几个人回复比我价值？ 看过代码，提出实际问题的人被要求回答这种政治正确不正确的问题。 这还是个程序员社区？ 所以我只能觉得我不适合这里，该滚的人是我了。 你们继续友善去吧，相信有更多的人会冲这友善来这里的。 |
 |
64
WenJimmy 2016-02-23 21:00:17 +08:00
我觉得回复被 B 的也要隐藏掉~
|
|
65
sox 2016-02-23 21:06:03 +08:00
|
|
66
jarlyyn 2016-02-23 21:09:38 +08:00 via Android
|
 |
67
breeswish 2016-02-23 21:24:55 +08:00
我觉得楼上有人喷的很在理呀， SEO 做不了是很大的缺陷，而需要支持 SEO 则需要架构上重构一部分，工作量也许还不小。这确实是这个项目最大的不足的地方。就是没有友善的说话。
|
|
68
breeswish 2016-02-23 21:29:52 +08:00
我也有过项目被说毫无意义的经历，我知道这些评价是基于对评论者、对可能的大多数其他人来说的，项目有很多问题，项目并不能对其他人做出什么贡献，等等。虽然那个项目后来发现还是能帮助很多人的，也就是说最终还是有意义的，但是无论怎么样，它对自己都是有意义的，楼主加油 :-)
|
 |
70
yibuyisheng 2016-02-24 08:51:45 +08:00
看到博客中一句话：
但是，大三开始我从后端转前端了。为了增强自己的前端能力（毕竟对于大三寒假，没几个月就要准备去面 BAT 实习生了，虚），于是寒假开始了重写博客， 重点把 es6,react,redux 学习、使用，并对组件开发、 spa 开发从初识到熟练，整个项目轻后端、重前端（后端代码全部也就 400 行的样子，前端合起来 2000 行左右）。 BAT 面试的时候基本不会细问流行框架相关的知识，比较看重的是基础（ html 、 css 、 js ， ES6 可以了解一下吧）知识掌握情况和运用已有基础知识解决实际问题的能力。 |
 |
71
mechanician 2016-02-24 09:44:01 +08:00
支持一下～看了 blog 觉得题主蛮厉害的啊，求认识～
|
|
72
SimplyY OP @yibuyisheng 嗯 基础我也认为很重要，寒假看完了两本 css 书， js 书这半年看了五六本。 react 相关生态学习，是阿里小主管的学习建议之一，还说挺重要。
最重要的，我觉得，写项目才会遇到大量实际问题，才能更快提高，这也是我大学自学一直项目驱动的原因，因为些项目，进步真的很快 |
|
73
SimplyY OP @mechanician github 我参与了一个组织，你可以在我 github 首页看到，右上方第一个，可以在那里面交流认识
|
 |
74
chenyg32 2016-02-24 09:50:44 +08:00
支持一下
|
|
75
mechanician 2016-02-24 09:53:20 +08:00
@SimplyY 右上方…… CoderUnion ？
|
|
76
SimplyY OP @mechanician 嗯
|
 |
77
isb 2016-02-24 10:06:49 +08:00
感觉阴影太浓重了 = =。
|
|
78
isb 2016-02-24 10:09:25 +08:00
box-shadow: 0 2px 22px #ccc;感觉效果好点
|
 |
79
LeoDev 2016-02-24 10:18:39 +08:00
赞一个
|
|
80
SimplyY OP @isb 我俩 color 值用的不一样，我直接用的 grey ，你的和 V2EX 的差不多，（但是萝卜白菜我都试了一下，我喜欢浓一点的。。。。
|
 |
81
jiongxiaobu 2016-02-24 11:23:36 +08:00 via Android 1
要 seo 加个服务端渲染呗。
|
|
82
SimplyY OP @jiongxiaobu 恩，谢谢，我估计 3 月底开始新的开发，搞搞服务器渲染
|
 |
83
bramblex 2016-02-24 11:38:11 +08:00
@codefalling 活捉 OwO
|
 |
84
moxiaonai 2016-02-24 13:10:39 +08:00 via iPhone
马克
|
 |
85
StephenW 2016-02-24 13:38:16 +08:00
没有什么话是不能好好说的，没有 seo 就没有价值，这一句就把人辛辛苦苦的努力给无视了。完整写过一遍的人自然懂得艰辛
|
 |
86
blue0125 2016-02-24 13:42:47 +08:00
为何这么吊？
|
 |
87
yundaren 2016-02-24 13:43:32 +08:00
重复造轮子，现在不是有 wordpress 已经够完美的了吗
|
|
88
jarlyyn 2016-02-24 13:49:21 +08:00
|
|
89
SimplyY OP @yundaren 第一，我说了纯粹练手，第二 WordPress 我不喜欢，我觉得他不完美，，第三造轮子可以显著提升自己，又不是商业项目，为何不能造轮子
|
 |
90
damonzhaofei 2016-02-24 16:15:33 +08:00
@SimplyY zip 压缩也是自动的么？
|
|
91
SimplyY OP @damonzhaofei gzip
是服务端开启的， |
|
92
SimplyY OP @damonzhaofei min 是 webpack 做的（也就是所谓的自动），我发现很多人弄混了前端 min gzip 的意义，我这里写写。
min 不叫压缩，叫混淆或者精简，比方说把函数名 test 精简 为 a ，所有代码全部变成一行，这样代码体积就小了。一般由自动化工具完成。 压缩一般用 gzip ，是编码行为，我们熟悉的有霍夫曼编码（可以压缩体积），是后端完成的。服务器端响应 http 请求的时候，可以把 response 的内容用 gzip 压缩，然后设置 header 的 Content-Encoding:gzip ，浏览器看到这个 header 后，就会去用 gzip 的方式解压。 个人拙解。 |
|
93
xcodebuild 2016-02-24 21:08:48 +08:00 via Android
@bramblex 好久不见，你又造了新轮子_(:з」∠)_。你的贴子下语气不善的回复更多（还有人不懂装懂地挑刺），，以至于我都不知道回复啥好就没说了Õ_Õ。
|
|
94
xcodebuild 2016-02-24 21:21:53 +08:00
@jarlyyn Talk is cheap.
|
|
95
reverland 2016-02-24 21:25:34 +08:00
|
|
96
jarlyyn 2016-02-24 21:32:14 +08:00
@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 和什么一样。 大概以为这里是课堂交流作业的地方？ |
|
98
SimplyY OP |
|
99
xcodebuild 2016-02-24 21:49:11 +08:00
|
|
100
jarlyyn 2016-02-24 21:53:10 +08:00
@codefalling
很不幸啊，我某个有 N 多人用的项目也是 0star 。 不是你说 talk is cheap 么，不就是 show me the code 么? 另外，这些 node_moduels 居然不提交？ 你知道哪些 Nodejs 项目是要把 node_moduels 加入.gitignore,哪些不加么？ 好好做过几个项目？ 别人都没说什么你急什么？把这里当成什么地方了? |
Select Language