Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

这份指南汇集了前端开发所使用语言的主流学习资源,并以开发者的视角进行整理编排而成。

Notifications You must be signed in to change notification settings

chenny417/Front-End-Develop-Guide

Repository files navigation

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

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

GitHub:icepy/Front-End-Develop-Guide |欢迎开发者一起维护,或反馈/投稿_

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

由@icepy负责整理

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

##目录

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生态-探索学习

移动前端技术

移动web UI框架

动画

性能调优

Front-End Develop 项目与工具

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

相关工具

####1. 开发工具

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

Sublime Text常用的插件:

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的安装;
  • Postman Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。

####4. VPN

####5. ES6编译

####6. gulp工具

####7.webpack

####8.服务

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:Facebook出品的一个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. 调试工具

其他工具:http://123.jser.us/

Front-End Questions

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

延伸可扩展的方向(全栈)

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

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

如果你想发展为全栈,强烈建议阅读Growth: 全栈增长工程师指南

Node.js

入门

文档

阅读

Mongodb

Chrome扩展开发

桌面应用程序开发

移动应用程序开发

WebGL

v8 引擎文献

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

社区

访问:社区列表

码农周刊JavaScript和前端部分优秀文章集合

访问:码农周刊JavaScript和前端部分优秀文章集合

About

这份指南汇集了前端开发所使用语言的主流学习资源,并以开发者的视角进行整理编排而成。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Swift 100.0%

AltStyle によって変換されたページ (->オリジナル) /