kdchang / front-end-engineering-starter-kit

Front End Engineering Resources Collections

Front End Team Starter Kit

Introduction

This is Front End Engineering Resource Document for NOE(New Onboard Engineer).

Getting Started

1. Setup your Editor enviroment(If you want to use other tools like vim, atom. It's fine.) Sublime、Sublime Babel Plugin、HTML-CSS-JS Prettify、ESLint
2. Setup NVM、Node、NPM、Webpack、React、React-DOM、Gulp
3. Setup Git、Gitlab (If you are not familiar with git/githlab/github, please check the Learning Resources.)
4. If you are not familiar with React, try this
5. We have some old tasks use Angular and jQuery. If you want to pick some skills about Angular. Please check Shaping up with Angular.js Play Course for Free.

Coding Convenstion

Ref.Front-end Code Standards

• React based Airbnb React/JSX Style Guide

About React ES6 standards. React.createClass versus extends React.Component

Learning Resources

Development Language

• HTML5

  1. w3schools

• CSS3

  1. w3schools

• JavaScript

  1. MDN
  2. JavaScript-The Good Parts

• ES6(JavaScript 2015)

  1. Learn ES2015
  2. ECMAScript 6 入门-阮一峰
  3. React on ES6+

• React

  1. Official Website
  2. Learning React.js: Getting Started and Concepts
  3. 交互學習 React
  4. 阮一峰 React 入门实例教程
  5. A collection of awesome things regarding React ecosystem(Awesome React)
  6. React (中文) 資源彙總
  7. React.js CheatSheet
  8. 2016 JavaScript 技术栈展望
  9. React Cheatsheets

• Flux

  1. Official Website

• Redux

  1. Official Website

• React Native

  1. Official Website
  2. 江清清的技术专栏

• GraphQL

  1. Official Website

• Node.js

  1. Official Website

• Angular

  1. Shaping up with Angular.js Play Course for Free
  2. AngularJS：factory，service与provider的区别

• jQuery

  1. Official Website

• D3

  1. Official Website
  2. 網頁視覺化利器 － D3.js 簡介

CSS Preprocessor

• SASS/LESS

CSS Framework

• Bootstrap
  1. Bootstrap

Task Runner

• Gulp

  1. gulp 入門指南

• Grunt

Module

• Concepts

  1. JavaScript模組化之旅
  2. What Is AMD, CommonJS, and UMD?
  3. 使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript

• Wepack

  1. Webpack 入門
  2. 建立React Webpack 工具包
  3. 如何使用 Webpack 模組整合工具

Package Management

• NPM

• Bower

  1. 学习Bower -- 前端开发包管理工具

Version Control

• Git

  1. Official Website
  2. 連猴子都能懂的Git入門指南
  3. 使用git和github进行协同开发流程
  4. GitLab介紹
  5. Learn-Git-in-30-days

• SVN

Generator

• Yeoman

Testing

• Mocha
• Jasamin

UI Pattern

• Mobile

  1. iOS Human Interface Guidelines
  2. Android Design Guidelines
  3. Pttrns: Mobile Design Patterns

• Web

  1. UI-patterns

Design Pattern

1. 4 JavaScript Design Patterns You Should Know
2. Learning JavaScript Design Patterns