Scya597/Web-Seminar-slide-v4

Backup Slides in 2017 Web Seminar

Web Programming (2017 Spring)

W0: Preparation (before class)

• 準備 Linux or OSX 環境的筆電
• 安裝 git
• 安裝 node v6 (請使用 n 或 nvm 管理版本)
• 準備一個自己喜歡的編輯器 (Atom, Sublime, vim, Emacs, etc.)
• 自己先看過 HTML/CSS/JavaScript 基本 tutorials
  • learnxinyminutes
  • codecademy
  • MDN
  • Learn Layout

W1: Web Programming Overview (3/1 chentsulin)

• 課程大綱
• History 發展
• 現代網站設計的概念與語言
• JavaScript Basic
• DOM

W2: More on JavaScript (3/8 CPH)

• Good Parts (Syntax..)
• Bad Parts (Type..)
• npm
• ESLint

W3: Node (3/15 kpman)

• CommonJS
• fs
• http
• Express
• more npm (run script)
• simple serv-side rendering example
• Git warm up (原理、init、status、log、add、commit)
• Git (github, remote, push, pull)
• 提醒 HW1

W4: Modern JavaScript (3/29 chentsulin)

• Trends
• ES6 (ES2015)
• Babel
• JSX
• React Basic(create-react-app)

W5: Webpack (4/5 CPH)

• CommonJS on client
• Webpack Basic
• Loaders
• Git collaboration (branch, checkout)
• GithubFlow
• Github pages

HW1: TODOs（純前端）

• Assign Day: 3/15
• Due Day: 4/19

W6: React 課堂實作 (Calculator using React.js) (4/12 all)

W7: Advanced Front-end (4/19 CPH)

• More on React
• Lifecycle hook
• with css, styles together (inline-style, className)
• Git (cherrypick, rebase -i, tag)

W8: API (4/26 kpman)

• Promise
• Fetch
• API Design
• 提醒 HW2

W9: Testing (5/3 chentsulin)

• TDD
• Coverage
• CI
• GitFlow, GithubFlow
• 專案管理 (SEMVER, alpha, beta, rc)
• React Router

W10: In-class Hackathon (5/10 all)

Individual，題目自訂，須依照一些前面教過的基本架構

HW2: 留言版（有 backend）

• Assign Day: 4/26
• Due Day: 5/10

W11: Redux (5/17 CPH)

• Action
• Store
• Reducer
• Middleware
• react-redux

W12: Database (5/24 chentsulin)

• ACID
• CAP
• RDBMS
• SQL
• 提醒 HW3

W13: Backend framework (5/31 kpman)

• SQL builder
• Cookie, Session
• MVC

W14: Other Backend Good stuff (6/7 chentsulin)

• Generator
• Migration
• Model
• Association

HW3: Blog

• Assign Day: 5/24
• Due Day: 6/14

W15: Others (TBD)

• Socket.io
• QA time