以开发者的视角整理编排的前端开发所使用语言的主流学习资源

KarStrand 9年前

来自: https://github.com/icepy/Front-End-Develop-Guide

Front-End-Develop-Guide 前端开发指南

创建此项目灵感从SwiftGuide而来,这份指南汇集了前端开发所使用语言的主流学习资源,并以开发者的视角进行整理编排而成。

GitHub: icepy/Front-End-Develop-Guide | 网站: http://front-end-developers-hunan.github.io 欢迎开发者一起维护,或 反馈/投稿

想了解关于该指南及 前端开发 更多信息的同学,可以阅读短文《 致 Front-End Developers 》。 想查看优秀的开源项目,可以访问 《Front-End Develop 项目精选》 。希望查看精选文章,可以访问 《Front-End Develop 文章精选》 。也欢迎企业招聘人才提供工作岗位(請附上薪資),可以提交到工作岗位。

由@icepy负责整理

由于个人精力有限,不足之处还望大家多多包容与提供建议。

目录

  • Front-End Develop 文档
    • Welcome to Front-End Develop
    • Front-End Develop Language
      • HTML&HTML5 文档
      • CSS&CSS3 文档
        • CSS Style Guide
        • CSS Language
        • Sass Guide
        • PostCss
      • JavaScript 文档
        • JavaScript Style Guide
        • JavaScript Language
    • Front-End Develop Fly
      • 常用库与框架的使用文档
      • JavaScript 日志
      • 开放网络标准
      • HTTP 文档
      • 缓存策略
      • 前端自动化工具
      • React&React Native生态-探索学习
      • 移动前端技术
      • 动画
      • 性能调优
    • Front-End Develop 项目与工具
      • 相关工具
      • Front-End Develop 开源项目
    • Front-End Questions
    • Front-End 需要了解的数据结构与算法
    • Front-End Develop 优秀文章
  • 延伸可扩展的方向
    • Node.js
    • Mongodb
    • WebGL
    • Chrome扩展开发
    • 桌面应用程序开发
    • 移动应用程序开发
    • V8 引擎文献
  • Front-End Developer Blog
  • 通用Developer 社区
  • 技术分享会议

Front-End Develop 文档

初略读懂Front-End Develop要做些什么

Web Front-End Stack:这张图非常详细。

Welcom to Front-End Develop

W3C组织提供了官网的地址: w3.org ,可以去查询最近实现的标准以及将来可能实现的讨论。

Front-End Develop Language

web前端开发可能包括HTML,CSS,JavaScript,Web API,SVG,WebGL,MathML等,语言是编程的基础,火狐的MDN出了一份比较通略的文档,可以快速查看 Web 技术文档

HTML&HTML5 文档

书籍:

CSS&CSS3 文档

CSS Style Guide

CSS Language

Sass Guide

  • Sass基础知识 :Sass官网,讲述Sass/SCSS应用的基础知识,变量、函数、条件、循环、宏等等;
  • Sass中文网 :中文大,给E文不好的小朋友们;
  • Sass Guidelines :这是由Sass专家 Hugo Giraudel 撰写的一份“编写稳健、可维护和可扩展的Sass”的指南,这份指南已被翻译成中文;
  • Sass meister :在线Sass/SCSS调试器;

PostCss

JavaScript 文档

注明:JavaScript文档将引用 justjavac/free-programming-books-zh_CN#JavaScript 所整理的免费图书以及自己所收集的资料;

JavaScript Style Guide

  • Google JavaScript 代码风格指南 :Google风格指南不但指出每条规范,还解释了为什么这样写的原因,同时给出了对与错的实例;
  • Airbnb JavaScript 规范 :A mostly reasonable approach to JavaScript,跟Google规范类似;
  • Google JSON 风格指南:该风格指南是对在Google创建JSON APIs而提供的指导性准则和建议。总体来讲,JSON APIs应遵循JSON.org上的规范。这份风格指南澄清和标准化了特定情况,从而使Google的JSON APIs有一种标准的外观和感觉。这些指南适用于基于RPC和基于REST风格的API的JSON请求和响应;
  • Javascript编程指南 ( 源码 )

JavaScript Language

Front-End Develop Fly

如果你想飞起来,这正是好去处。

了解常用库与框架的使用文档

JavaScript 日志

前端代码异常日志与监控

开放网络标准

理解OAuth 2.0

HTTP 文档

下面两篇文章不会对 HTTP 的细节进行深究,而是从够高和更结构化的角度将 HTTP 协议的元素进行分类讲解,可以先阅读 HTTP 协议漫谈图解Http协议 来对HTTP有一个大概的了解。

深入全面了解,可阅读 HTTP权威指南

缓存策略

cache是提高应用性能重要的一个环节,必需要有所了解。

Web缓存机制系列

前端自动化工具

现在的前端自动化工具主要如下三个流派,目测涵盖90%以上经常使用。

React&React Native生态-探索学习

移动前端技术

动画

性能调优

Front-End Develop 项目与工具

工欲善其事,必先利其器。开源项目与工具的使用,将极大的提高前端开发之效率。

相关工具

1. 开发工具

  • Sublime Text :前端开发好用到爆;
  • Atom :Github出品的一个类似Sublime Text编辑器,长的蛮像的,快捷键也非常类似;
  • Vundle.vim:使用vim开发前端的利剑,包括其他语言;

Sublime Text常用的插件:

  • Emmet:zen coding的升级版,对于前端来说,可是必备插件;
  • sublimelint:用于代码的校验,支持 HTML、CSS、JS、PHP、Java、C++ 等16种语言;
  • JsFormat :用于JavaScript格式化;
  • jQuery :jQuery语法提示;
  • Underscore :Underscore语法提示;
  • DocBlockr :快速编写注释;
  • SublimeCodeIntel :智能语法分析提示;
  • ColorPicker :快速选取颜色
  • HTML-CSS-JS Prettify :html/css/js 格式化
  • Alignment :用于代码对齐;
  • WakaTime :用于记录编程时间;
  • Seti_UI :好看的主题,包括文件icon;
  • OmniMarkupPreviewer :将MD文件渲染成网页,可以在浏览器中查看;
  • Babel :ES6语法高亮;

Atom常用的插件:

vim常用的插件:

Bundle 'christoomey/vim-run-interactive'  Bundle 'Valloric/YouCompleteMe'  Bundle 'croaky/vim-colors-github'  Bundle 'danro/rename.vim'  Bundle 'majutsushi/tagbar'  Bundle 'kien/ctrlp.vim'  Bundle 'pbrisbin/vim-mkdir'  Bundle 'scrooloose/syntastic'  Bundle 'slim-template/vim-slim'  Bundle 'thoughtbot/vim-rspec'  Bundle 'tpope/vim-bundler'  Bundle 'tpope/vim-endwise'  Bundle 'tpope/vim-fugitive'  Bundle 'tpope/vim-rails'  Bundle 'tpope/vim-surround'  Bundle 'vim-scripts/ctags.vim'  Bundle 'vim-scripts/tComment'  Bundle "mattn/emmet-vim"  Bundle "scrooloose/nerdtree"  Bundle "Lokaltog/vim-powerline"  Bundle "godlygeek/tabular"  Bundle "msanders/snipmate.vim"  Bundle "jelera/vim-javascript-syntax"  Bundle "altercation/vim-colors-solarized"  Bundle "othree/html5.vim"  Bundle "xsbeats/vim-blade"  Bundle "Raimondi/delimitMate"  Bundle "groenewege/vim-less"  Bundle "evanmiller/nginx-vim-syntax"  Bundle "Lokaltog/vim-easymotion"  Bundle "tomasr/molokai"  Bundle "klen/python-mode"  Bundle "leafgarland/typescript-vim"  Bundle "scrooloose/nerdcommenter"

2. 源代码管理工具

  • Github:声望日盛-全球最大的“同性”网站;
  • Github For Mac:设计的非常美观的git管理客户端,它能取代命令行所获得的功能;
  • Gitcafe :国内的Github,相比之下拥有速度优势;
  • Git@OSC :也是类似的项目,在国内,可以免费建立1000+私有项目;

3. Mac工具

关于Mac平台的使用,推荐大家阅读 入门精选

  • HomeBrew :OS X上非常优秀的包管理工具;
  • HomeBrew-Cask :简洁优雅的Mac OS X软件安装体验;
  • iTerm 2 :OS X上一个增强版的shell终端;
  • oh-my-zsh :OS X上用来增强shell命令行的工具;
  • Dash :Dash is an API Documentation Browser and Code Snippet Manager. Dash stores snippets of code and instantly searches offline documentation sets for 150+ APIs (for a full list, see below). You can even generate your own docsets or request docsets to be included;
  • tmux :终端复用神器,帮助在Mac或者Linux上做开发的程序员在使用终端时更加得心应手;
  • MacVim:Mac下GUI vim编辑器;
  • Xcode :也许你用不上,安装Xcode主要是为了Xcode command line tools工具包,你也可以选择不安装Xcode,使用xcode-select --install跳过Xcode的安装;

4. V*N

5. ES6编译

6. gulp工具

7.webpack

Front-End Develop 开源项目

1. 有趣味的开源项目

  • Web Developer技能树:类似《魔兽世界》中的天赋树;
  • octotree:浏览器扩展(Chrome,Firefox,Safari和Opera)显示GitHub树格式的代码;
  • react-native:出品的一个可以使用JavaScript来构建Native UI的库;
  • ionic:Ionic是一个强大的HTML5 原生应用(native app) 开发框架,帮助你用HTMLL,css和javascript构建具有原生味道的移动应用(mobile apps);
  • passport-bnet:暴雪提供的Nodejs版SDK
  • hexo:编写博客使用的工具
  • traceur-compiler:可以运行未来的JavaScript的JavaScript;
  • EpicEditor:可以嵌入网页的Markdown编辑器;
  • gitbook:用于生成在线书籍的工具;
  • kityminder:作为一款在线的脑图编辑工具,它有着不亚于 native 脑图工具的交互体验;

2. 开源库

  • three.js:three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象;
  • fullPage.js:fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站;
  • angular-ui-router:angular-ui-router是AngularJS的路由框架,和默认的$route不同,它将所有路由包装成可划分层级的状态机状态,路由路径在ui-router中不是必须的。由于ui-router的路由状态机是分层级的,所以使用ui-router可以非常方便地创建包含多个嵌入的子模板;
  • marked:markdown解析器;
  • tsd:在TypeScript中替换第三方库所使用的引用文件;
  • react:可以用一种声明性、高效和灵活的JavaScript来构建用户界面的框架;
  • hammer.js:处理触摸事件,以及手势的JavaScript库;
  • resumable.js:这是用于HMLT5 File Api封装可以方便操作文件的一个库;
  • commander.js:可以帮助快速开发Nodejs命令行工具的一个包;
  • persistencejs:是一个异步的Javascript库的对象关系映射框架;
  • artTemplate: JavaScript模板引擎;
  • TypeScript:JavaScript的超集,扩展了类型,类,接口等语法,兼容ES6;
  • fastclick:FastClick是一个简单的、易于使用的库,消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟;
  • node-browserify:Browserify是一个node.js模块,主要用于改写现有的CommonJS模块,使得浏览器端也可以使用这些模块;
  • socket.io:Socket.io是使用得非常普遍的前端调用Websocket的库;
  • superagent:superagent 是nodejs里一个非常方便的客户端请求代理模块;
  • cheerio:它可以从一坨html的片断中构建DOM结构,然后提供像jquery一样的css选择器查询;
  • express:它用于构建Web网站,非常快速;
  • node-mongodb-native:nodejs用于操作mongodb;
  • ejs:JavaScript模板引擎;
  • riot:一个小巧的UI和代码结构的框架;
  • JavaScript-MD5:JS版的MD5;
  • zepto:在浏览器(Safari、Chrome和Firefox)上开发页面应用或者构建基于html的web-view本地应用,如PhoneGap,使用Zepto是一个不错的选择;
  • async:JS实现的一个方便快捷异步编程的库;
  • echarts:基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力;
  • koa:下一代编写Web网站的nodejs框架;
  • vue:MVVM框架;
  • underscore:JavaScript函数工具库;
  • backbone:Backbone.js为复杂WEB应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件;集合附有可枚举函数的丰富API; 视图可以声明事件处理函数,并通过RESRful JSON接口连接到应用程序。
  • jquery:jQuery 是一个高效、精简并且功能丰富的JavaScript 工具库;
  • angular.js:AngularJS是为了克服HTML在构建应用上的不足而设计的,通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。
  • Flow:非死book出品的一个JavaScript静态编译器;
  • avalon:用于构建Web界面的MVVM JavaScript框架;
  • requirejs:JavaScript模块化的开山鼻祖;
  • seajs:中国开发者编写的一个JavaScript模块化库;
  • d3:基于JavaScript编写的一个图表库,非常强大。
  • sugar.js :它扩展了现有的JS对象的方法,让你可以用更少的代码做更多的事情;
  • lo_dash :JavaScript函数工具库;

3. 开放平台

  • wx:wx是极简设计的微信(公共平台)应用参考级框架,而并非微信接口在node.js下的幂等映射;
  • api-wow-docs:暴雪提供的魔兽世界API文档

4. 开源web网站系统

  • candy:基于多说社交评论的社会化论坛系统,采用 Node.js/Mongodb 构建;

5. 调试工具

  • node-inspector:nodejs的调试工具;
  • node-supervisor:nodejs用于无需重启的工具

Front-End Questions

Front-End 需要了解的数据结构与算法

Front-End Develop 优秀文章集合

延伸可扩展的方向

延伸可扩展的方向是指,脱离了浏览器环境的编程。

关于编译,强烈建议阅读 工程中的编译原理--Jison入门篇

Node.js

入门

文档

阅读

Mongodb

Chrome扩展开发

桌面应用程序开发

移动应用程序开发

WebGL

v8 引擎文献

可以先通过阅读 V8引擎简介 来了解JavaScript现在最好的引擎是怎样的,然后访问 Chrome V8 来获取最新的资料,API文档可以访问 v8-docs

Front-End Developer Blog

中文 Front-End 开发博客列表,本博客列表会长期维护,如果有推荐的博客,请到此处提交博客信息

博客地址 RSS地址
Phodal https://www.phodal.com/
Plane Art http://www.planeart.cn/?feed=rss2
王玮的博客 http://imvirgo.com/feed/
UED TEAM http://www.ued163.com/?feed=rss2
随网之舞 http://feeds.feedburner.com/dancewithnet
不名一格 http://www.microidc.com/feed/
Hugo Web前端开发 http://www.ghugo.com/feed/
阿里巴巴(中文站)用户体验设计部博客 http://www.aliued.cn/feed
何畏 http://www.lzlu.com/blog/?feed=rss2
PlanABC - 怿飞’s Blog http://feed.planabc.net/
Designsor http://www.designsor.com/feed
Time Machine http://rlog.cn/?feed=rss2
为之漫笔 http://www.cn-cuckoo.com/feed
博客园_风流涕淌 http://www.cnblogs.com/Philoo/rss
彬Go http://blog.bingo929.com/feed
Gracecode.com http://feeds.gracecode.com/gracecode/
Koubei UED http://ued.koubei.com/?feed=rss2
Alibaba.com UED http://www.aliued.com/feed/
Taobao UED Team http://ued.taobao.com/blog/feed/
博客园-振之博文 http://www.cnblogs.com/zhenn/
Kejun's Blog http://hikejun.com/blog/feed/
博客园_纸头折飞机 http://www.cnblogs.com/xueduanyang/rss
最前端的生活 http://www.bq69.com/feed
腾讯CDC http://cdc.tencent.com/?feed=rss2
博客园_叶小钗 http://www.cnblogs.com/yexiaochai/rss
Hua's View http://huaview.com/feed
RainBlog-烟雨空间 http://rain520.net/Feed/rss.xml
web前端开发工程师的随记--黑妞haha http://www.heiniuhaha.cn/blog/?feed=rss2
蓝色理想 http://www.blueidea.com/common/rss.asp
博客园_Ruby's Louvre http://www.cnblogs.com/rubylouvre/rss
hax的技术部落格 http://hax.javaeye.com/rss
CssRain-前端技术 http://www.cssrain.cn/?feed=rss2
MED http://mux.alimama.com/feed/
W3CPLUS http://feed.feedsky.com/W3CPlus
博客园_winter-cn http://www.cnblogs.com/winter-cn/
走走停停看看 http://shawphy.com/feed
Hi, I'm Adam Lu. http://adamlu.com/?feed=rss2
WEB前端开发 http://www.css88.com/feed
岁月如歌 https://lifesinger.wordpress.com/feed/
Web开发中需要了解的东西 http://coolshell.cn/feed
样式之美 http://feeds2.feedburner.com/aoao
時計坂一刻館三号室 http://feed.quchao.com/
CSS森林(CSS Forest) http://www.cssforest.org/blog/index.php?atom=1
Ross Wan's World! https://mrwlwan.wordpress.com/feed/
博客园_汤姆大叔的博客 http://www.cnblogs.com/TomXu/rss
前端观察 https://www.qianduan.net/rss/
张云龙个人博客 https://github.com/fouber/blog

通用Developer 社区

在Github上找到一个社区网站收集的项目--front-end-collect

中文 Developer 社区列表,本社区列表会长期维护,如果有推荐的社区,请到此处提交社区信息

中文 Developer 社区列表 地址
领略前端技术 阅读奇舞周刊 http://www.75team.com/weekly/
div.io http://div.io/#/welcome
稀土掘金 http://gold.xitu.io
开发者头条 http://toutiao.io/
码农周刊 http://weekly.manong.io/
InfoQ http://www.infoq.com/cn/
Segmentfault http://segmentfault.com/
Get社区 http://get.jobdeer.com/
极客头条 http://geek.csdn.net/hotest
极客头条-前端 http://geek.csdn.net/forum/47

技术分享会议

说明:技术分享会议引用了ufologist项目中的收集,与自己收集的资源整理而成。

会议组织列表 地址
D2前端技术论坛 http://www.d2forum.org/
WebReBuild http://webrebuild.org
Velocity http://velocity.oreilly.com.cn
JSCONF.CN http://jsconf.cn/
阿里技术嘉年华 http://adc.taobao.com
中国CSS开发者大会 http://css.w3ctech.com/
w3ctech http://www.w3ctech.com/event
HTML5梦工厂 http://www.html5dw.com/
前端圈 http://www.fequan.com/
QCon北京 http://qconbeijing.com/
QCon上海 http://qconshanghai.com/
QCon@InfoQ http://www.infoq.com/cn/qcon
ArchSummit http://www.archsummit.com/
阿里技术沙龙 http://club.alibabatech.org
Apple WWDC https://developer.apple.com/wwdc/
Google I/O https://events.google.com/io2015/