互联网时代前端 “手工艺人” 的百宝箱
bkqr2156
8年前
<h2>互联网时代前端"手工艺人"的 百宝箱</h2> <p>武林高手都有几件称手的兵器, 更别提手中无剑, 心中也无剑的世外高人了.</p> <p>软件开发者做为新时代的"手工艺人", 当然也需要自己称手的 工具 来改变这个世界.</p> <p>我做为一名专业的前端 工程师 ( F2E ), 特将自己多年的经验整理出来, 一方面帮助自己理清思路, 想想自己是怎样一步步走过来的, 另一方面当然也是想和大家一起分享下我的收获, 希望每个人都能够从中获益, 特别是那些想入门前端开发的朋友.</p> <p>我当年无数次梦想着有那么一份总结文档摆在我面前, 让我免于走弯路, 话说站在巨人(当然我不是什么巨人, 身边也没有这样的巨人)的肩膀上, 我们才能够如此轻松愉快地学习到各种精华. 别人可能是一辈子的研究成果, 我们可能一天就看完了, 正是知识的传承在推动着时代的进步, 改变世界.</p> <p>由衷的感谢那些在前端道路上一路指引着我们的前辈们, 非常感谢. 我从你们那里学到了太多东西.</p> <p>这份总结我会保持更新, 如果有任何问题, 欢迎大家提出各种issues, 当然也鼓励大家fork出自己的版本.</p> <h2>百宝箱</h2> <ul> <li><a href="/misc/goto?guid=4959733001244716990" rel="nofollow,noindex">前端工程师常用软件</a> ( <a href="/misc/goto?guid=4959733001323234452" rel="nofollow,noindex">备选项</a> )</li> <li><a href="/misc/goto?guid=4959733001397714727" rel="nofollow,noindex">前端常用框架</a> ( <a href="/misc/goto?guid=4959733001482515607" rel="nofollow,noindex">备选项</a> )</li> <li><a href="/misc/goto?guid=4959733001560638981" rel="nofollow,noindex">前端常用云服务</a></li> <li><a href="/misc/goto?guid=4959733001643457013" rel="nofollow,noindex">常用App</a></li> <li><a href="/misc/goto?guid=4959733001728119106" rel="nofollow,noindex">前端架构beta</a></li> <li>前端工作流程 |前后端接口规范 |网站项目目录结构规范</li> <li><a href="/misc/goto?guid=4959733001803273133" rel="nofollow,noindex">前端精选文集</a></li> <li><a href="/misc/goto?guid=4959733001888617434" rel="nofollow,noindex">软件开发团队的人员配置</a></li> </ul> <h2>前端趋势</h2> <p><a href="/misc/goto?guid=4959733001961250349" rel="nofollow,noindex">如何跟上前端开发的最新前沿</a></p> <ul> <li>模块化 <ul> <li>AMD/CMD</li> <li><a href="/misc/goto?guid=4959733002044583294" rel="nofollow,noindex">ES6 module</a> JavaScript 语言标准的模块化方案</li> <li><a href="/misc/goto?guid=4959733002121579943" rel="nofollow,noindex">webpack</a></li> </ul> </li> <li>组件化(标准, 通用) <ul> <li><a href="/misc/goto?guid=4958873995369825700" rel="nofollow,noindex">Web Components</a></li> <li><a href="/misc/goto?guid=4959630547860809707" rel="nofollow,noindex">React(Virtual DOM)</a></li> <li>组件生态圈, 想想 npm 的发展势头</li> </ul> </li> <li>Web 规范 <ul> <li><a href="/misc/goto?guid=4959733002260699267" rel="nofollow,noindex">HTML5</a></li> <li>CSS3/ <a href="/misc/goto?guid=4959660673172778749" rel="nofollow,noindex">CSSNEXT</a> / <a href="/misc/goto?guid=4959733002372896164" rel="nofollow,noindex">CSS STILL SUCKS</a></li> <li><a href="/misc/goto?guid=4959733002455920017" rel="nofollow,noindex">ES5</a> <a href="/misc/goto?guid=4959733002536086328" rel="nofollow,noindex">ES6</a></li> <li><a href="/misc/goto?guid=4959733002604894060" rel="nofollow,noindex">HTTP/2</a></li> <li>响应式解决方案特别是 <a href="/misc/goto?guid=4958866118725889292" rel="nofollow,noindex">图像的适配方案</a> <a href="/misc/goto?guid=4959733002724013916" rel="nofollow,noindex">Responsive Images 101</a></li> </ul> </li> <li>前端测试 <ul> <li>单元测试</li> <li>功能测试</li> <li>多浏览器测试karma</li> </ul> </li> <li>前端工程化 <ul> <li>开发流程标准化, 工业化 | <a href="/misc/goto?guid=4958967341586954772" rel="nofollow,noindex">Grunt</a> Yeoman <a href="/misc/goto?guid=4958966224142136147" rel="nofollow,noindex">FIS</a> <a href="/misc/goto?guid=4959733002860284932" rel="nofollow,noindex">JDF</a> <a href="/misc/goto?guid=4959733002937264288" rel="nofollow,noindex">coolie</a></li> </ul> </li> <li>前端架构 <ul> <li>双向数据绑定 MVVM Angular</li> <li>单向数据流可控可预测 <a href="/misc/goto?guid=4959645713024772241" rel="nofollow,noindex">Redux</a></li> <li>Web前端性能优化 WPO</li> <li>前端安全</li> </ul> </li> <li><a href="/misc/goto?guid=4958524645463947991" rel="nofollow,noindex">Node.js</a> <ul> <li>Full Stack developer(全端工程师), 前后端融合</li> </ul> </li> <li>Web App <ul> <li>SPA(Single Page Web App)</li> <li>移动端前端开发</li> <li>Hybrid App | <a href="/misc/goto?guid=4958869360442056133" rel="nofollow,noindex">React Native</a></li> </ul> </li> <li><a href="/misc/goto?guid=4959733003104444064" rel="nofollow,noindex">Web Game</a></li> </ul> <h3>前端博客/社区</h3> <ul> <li><a href="/misc/goto?guid=4958836157683731590" rel="nofollow,noindex">百度 FEX</a> / <a href="/misc/goto?guid=4958849076296879202" rel="nofollow,noindex">EFE</a></li> <li><a href="/misc/goto?guid=4959733003250170524" rel="nofollow,noindex">淘宝 UED</a> / <a href="/misc/goto?guid=4959670864108219822" rel="nofollow,noindex">THX</a> /手机淘宝 / <a href="/misc/goto?guid=4959733003368380669" rel="nofollow,noindex">天猫</a> / <a href="/misc/goto?guid=4959733003452829746" rel="nofollow,noindex">有一点设计UED</a> / <a href="/misc/goto?guid=4959733003538108910" rel="nofollow,noindex">MUX</a> / <a href="/misc/goto?guid=4959719448917817726" rel="nofollow,noindex">FED</a></li> <li><a href="/misc/goto?guid=4959733003656809485" rel="nofollow,noindex">腾讯 ISUX</a> / <a href="/misc/goto?guid=4959733003744773854" rel="nofollow,noindex">AlloyTeam</a> / <a href="/misc/goto?guid=4959664480572570900" rel="nofollow,noindex">TGideas</a> / <a href="/misc/goto?guid=4959733003850541626" rel="nofollow,noindex">TID</a> / <a href="/misc/goto?guid=4959733003932333658" rel="nofollow,noindex">WFE</a> / <a href="/misc/goto?guid=4959733004019624973" rel="nofollow,noindex">IMWEB</a> / <a href="/misc/goto?guid=4959733004107336322" rel="nofollow,noindex">MXD</a></li> <li><a href="/misc/goto?guid=4959642386949668564" rel="nofollow,noindex">奇舞团</a> / <a href="/misc/goto?guid=4958861448674781793" rel="nofollow,noindex">去哪儿</a> / <a href="/misc/goto?guid=4959733004260651738" rel="nofollow,noindex">携程UED</a> / <a href="/misc/goto?guid=4959733004351143332" rel="nofollow,noindex">大搜车</a> / 前端团队blog</li> <li>TODO: blog正在收集中</li> <li><a href="/misc/goto?guid=4958875403325459346" rel="nofollow,noindex">https://github.com/foru17/front-end-collect</a></li> <li><a href="/misc/goto?guid=4959648275021430299" rel="nofollow,noindex">A List Apart</a> / <a href="/misc/goto?guid=4958525240698494275" rel="nofollow,noindex">Smashing Magazine</a> / <a href="/misc/goto?guid=4959633168860543590" rel="nofollow,noindex">CSS-Tricks</a> / <a href="/misc/goto?guid=4958535862328596435" rel="nofollow,noindex">Codrops</a> / <a href="/misc/goto?guid=4958865026583272219" rel="nofollow,noindex">AWWWARDS</a></li> <li>首选是行业博客</li> <li>再是大牛的个人博客/前端著名人物博客</li> <li><a href="/misc/goto?guid=4959733004732931853" rel="nofollow,noindex">Aaron</a> / <a href="/misc/goto?guid=4959642381093536423" rel="nofollow,noindex">叶小钗</a> / <a href="/misc/goto?guid=4959733004859207807" rel="nofollow,noindex">张鑫旭</a> /民工精髓 /hax /张云龙 /射雕 / <a href="/misc/goto?guid=4959642382075950583" rel="nofollow,noindex">司徒正美</a> / <a href="/misc/goto?guid=4959733004967461535" rel="nofollow,noindex">Philip Walton</a> / <a href="/misc/goto?guid=4959733005046942301" rel="nofollow,noindex">NCZOnline</a></li> <li>以及其他前端社区</li> <li><a href="/misc/goto?guid=4959733005136907644" rel="nofollow,noindex">码农周刊</a> / <a href="/misc/goto?guid=4959642387137189755" rel="nofollow,noindex">开发者头条</a> / <a href="/misc/goto?guid=4959733005253363611" rel="nofollow,noindex">Web技术日报</a> / <a href="/misc/goto?guid=4959733005332255380" rel="nofollow,noindex">W3CPlus周刊</a> / <a href="/misc/goto?guid=4959733005420666645" rel="nofollow,noindex">前端周刊</a> / <a href="/misc/goto?guid=4959733005507527082" rel="nofollow,noindex">京东凹凸实验室拇指期刊</a> / <a href="/misc/goto?guid=4959733005596034434" rel="nofollow,noindex">Codrops Collective</a></li> <li><a href="/misc/goto?guid=4959668471820709084" rel="nofollow,noindex">掘金</a></li> <li><a href="/misc/goto?guid=4959642387042633823" rel="nofollow,noindex">Div.IO</a></li> <li><a href="/misc/goto?guid=4959733005731851417" rel="nofollow,noindex">F2E - 前端技术社区</a></li> <li><a href="/misc/goto?guid=4959733005809664038" rel="nofollow,noindex">V2EX</a></li> <li><a href="/misc/goto?guid=4959726143518914236" rel="nofollow,noindex">前端圈</a></li> <li><a href="/misc/goto?guid=4959733005939694551" rel="nofollow,noindex">Teahour.fm</a></li> <li><a href="/misc/goto?guid=4959648274758422472" rel="nofollow,noindex">Web technology for developers | MDN</a></li> <li><a href="/misc/goto?guid=4958966778625381862" rel="nofollow,noindex">醉前端</a></li> <li><a href="/misc/goto?guid=4959733006079447834" rel="nofollow,noindex">ThoughtWorks中国分享</a> | <a href="/misc/goto?guid=4959733006161455072" rel="nofollow,noindex">技术雷达</a></li> <li><a href="/misc/goto?guid=4959733006246630498" rel="nofollow,noindex">技术流</a></li> </ul> <h3>技术峰会</h3> <ul> <li><a href="/misc/goto?guid=4959642387437297923" rel="nofollow,noindex">D2前端技术论坛</a></li> <li><a href="/misc/goto?guid=4959642387534165667" rel="nofollow,noindex">WebReBuild</a></li> <li><a href="/misc/goto?guid=4959642387619986878" rel="nofollow,noindex">Velocity</a></li> <li><a href="/misc/goto?guid=4959642387706315574" rel="nofollow,noindex">JSCONF.CN</a></li> <li><a href="/misc/goto?guid=4959642387802044972" rel="nofollow,noindex">阿里技术嘉年华</a></li> <li><a href="/misc/goto?guid=4958964910442068019" rel="nofollow,noindex">中国CSS开发者大会</a></li> <li><a href="/misc/goto?guid=4959642387933509694" rel="nofollow,noindex">w3ctech</a></li> <li><a href="/misc/goto?guid=4958531634868865406" rel="nofollow,noindex">HTML5梦工厂</a></li> <li><a href="/misc/goto?guid=4959642388055719042" rel="nofollow,noindex">前端圈</a></li> <li><a href="/misc/goto?guid=4959642388153203077" rel="nofollow,noindex">QCon北京</a> / <a href="/misc/goto?guid=4959642388240954306" rel="nofollow,noindex">QCon上海</a> / <a href="/misc/goto?guid=4959642388331238776" rel="nofollow,noindex">QCon@InfoQ</a> / <a href="/misc/goto?guid=4959649091991148714" rel="nofollow,noindex">StuQ</a> / <a href="/misc/goto?guid=4959733006712777853" rel="nofollow,noindex">InfoQ 迷你书</a></li> <li><a href="/misc/goto?guid=4959642388425895039" rel="nofollow,noindex">ArchSummit</a></li> <li><a href="/misc/goto?guid=4959642388509732211" rel="nofollow,noindex">阿里技术沙龙</a></li> <li><a href="/misc/goto?guid=4958963136892174610" rel="nofollow,noindex">Google I/O</a></li> <li><a href="/misc/goto?guid=4959733006877342063" rel="nofollow,noindex">D-Day</a></li> <li><a href="/misc/goto?guid=4959733006967483526" rel="nofollow,noindex">NationJS Conference</a></li> </ul> <h3>其他收集</h3> <ul> <li><a href="/misc/goto?guid=4958875403325459346" rel="nofollow,noindex">front-end-collect</a></li> <li><a href="/misc/goto?guid=4959733007060262366" rel="nofollow,noindex">前端工程师手册</a></li> </ul> <p> </p> <p> </p> <p> </p>