Startup Engineering Camp Guide to HTML5, JavaScript and Lean Development

Startup
Engineering
Camp #3
www.moko365.com

靜宜⼤大學
2013/10/19、10/20
Jollen Chen <jollen@moko365.com> / Founder
Hank Wang <hank@moko365.com> / Software Developer
本著作係採⽤用創⽤用 CC 姓名標⽰示-⾮非商業性禁⽌止改作 3.0 Unported 授權條款授權.

Founder and CEO, Moko365 Inc <jollen@moko365.com>
10+ years in embeddes software and ODM industry Taiwan.
Trainner and consultant for Android/HTML5.
Skills: JavaScript, C, C++, Android App..etc

Software Engineer, Moko365 Inc <hank@moko365.com>
Jointly development of sociable networking web and also
develope in Android and iOS App.
Skills: JavaScript, Python, iOS...etc

mokocrush
learning by doing

HTML5 and <div>
Canvas
JavaScript
WebSockets
Feature detection
Swapping items
Matching three

Startup Engineering Course
at Standford

來源：https://class.coursera.org/startup-001/lecture/index

moko365

Future Courses
AWS
Heroku
JavaScript
CoffeeScript
Node.js
Express
Sequelize
PostgreSQL
Bootstrap

phantom.js
Angular
Backbone
Sublime
emacs vi
JSON
LESS
SCSS SASS
Grunt
moko365

HTML5 Apps

Single page application
<!DOCTYPE html>
<html>
<head>
! <meta charset="utf-8">
! <title>NO Game</title>
</head>
<body>
<div id="game">
! <div class="screen" id="main-menu"></div>
! <div class="screen" id="game-screen"></div>
! <div class="screen" id="score-board"></div>!
</div>
</body>
</html>

moko365

Prototyping
Architect
Organize
Frontend
Lean Development

Bootstrap
1. CSS framework and grid system
2. Fast prototyping
3. Revamp your workflow

http://mashable.com/2013/04/26/css-boilerplates-frameworks/

Page Layout Manager
1. Easy to seperate and manage layouts
2. Use a HTML5 template engine


Choose Languages
Programming languages
Template engine languages
Stylesheet languages

JavaScript + Jade + SASS

http://jade-lang.com

Understanding Jade
doctype 5
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}
body
h1 Jade - node template engine
#container.col
if youAreUsingJade
p You are amazing
else
p Get on it!
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade</title>
<script type="text/javascript">
if (foo) {
bar(1 + 5)
}
</script>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container" class="col">
<p>You are amazing</p>
<p>Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.</p>
</div>
</body>
</html>

Source: http://jade-lang.com

Startup
keeping up on new technologies, doing quick
evaluations, and then snapping the pieces together

Client/Server Architecture
Presentation
(HTML5/CSS/JavaScript)

HTTP

RESTful API
(HTTP and JSON)

(URI)

Browser

Business Logic & Service

Browser Engine

Application Server

Operating System

Camera

Sensor

...

MySQL

I/O

...

Over HTTP
(Cloud)


HTTP API 的形式

API

Query string

http://localhost:8888/send?m=hello&u=jollen

Pathname

URL (⼀一種 URI 形式)


Response Content
HTML Document
XML Document
JSON Data
Base64 encode (⽤用於 Binary 檔案)
亦可⾃自定


HTTP API
Web Service API (Open API) over HTTP
以 JSON 格式回應資訊
Client 與 Server 的互動架構
GET 是⼀一種 HTTP 請求⽅方式 (HTTP Methods)
基於 HTTP Methods 以 HTTP API 的系統架構
➡

REST

➡

RESTful


Web Service
RESTful
CRUD
Invoke Web service in Backbone way

JavaScript + Jade + SASS + Backbone + REST

REST
Resource Oriented Architecture
A resource is indentified by a URI

URI 的定義有標準規範


REST Object Example
GET /save.php?u=jollen&s=100

POST /user/jollen/2048


Nodejs、Bootstrap
矽⾕谷眾多的 Startups 正是以 JavaScript、
Nodejs、Bootstrap 等技術，來打造軟體產品

台灣有許多新創公司，也都使⽤用上述提到的技術在開發服務

Use MVC for Frontend JavaScript
Model, View and Control

Views and Templating
Handlebars.js and Underscore’s
template
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns

Spine.js or Backbone.js


Spine.js and Backbone.js


Manage Data as Collections


manage the data for an application
e.g. Backbone "collections"


MVC to MPV

MPV

Models, Views & Presenters
MVP is generally used most often in
enterprise-level applications where it's
necessary to reuse as much
presentation logic as possible.
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns

Mobile first
HTML5 is good at responsive design.
Bootstrap 3 is mobile first.

Frontend vs Backend
HTML5
JavaScript
Prototype
CSS3
DOM
jQuery
Backbone
Unit Testing

Nodejs
Express
MongoDB
Grunt
REST


Best Practice to Frontend JavaScript
JavaScript closure (module)
Use // {BEGIN|END} TESTING API
Use Instantiable Objects
Separate DOM event handlers from the
action it performs
https://shanetomlinson.com/2013/testing-javascript-frontend(http://goo.gl/HpT7p6)
part-1-anti-patterns-and-fixes/

Best Practice to Frontend JavaScript
Mock in XHR requests
Asynchronous programming requires
notifications
externalize all scripts
Use callbacks
https://shanetomlinson.com/2013/writing-testable-javascriptpart-2-refactor-away-anti-patterns/

More Best Practice ?
Use stylesheet language


JavaScript Constructor Pattern
function Person(name, job) {
! this.name = name;
! this.job = job;
! this.queryJob = function() {
! ! alert(this.job);
! };
}
// 將 Person() 視為 constructor
var person = new Person("Jollen", "Software Developer");
alert(person instanceof Person); // true


Lean Software Development
源⾃自⽇日本 Toyota 的⽣生產系統
由 Agile 社群將之導⼊入軟體⼯工程領域，成為敏捷開
發模式的重要思想基礎
Mary Poppendieck 與 Tom Poppendieck 將其
發展成⼀一套系統化的模式
22 Tools、7 Principles


Open Source Way
⾃自我組織型（Self-Organized）的研發團隊
Kanban ⽅方法論


7 Principles
Eliminate Waste
Amplify Learning
Decide as Late as Possible
Deliver as Fast as Possible
Empower the Team
Build Integrity In
See the Whole


Typical Project Management
Project scope management

Collect Requirements
Define Scope
Create WBS
Verify Scope
Control Scope

See the Waste
Booklog.io

Setup a Goal
Fast Prototyping
Implement REST
Documentation

Using Gitflow with Github

http://datasift.github.io/gitflow/GitFlowForGitHub.html


Open Innovation
Hacker、社群、GPLv2 與
Apache、⾃自由軟體與 Open
source，都是開放創新的元素
Chesbrough 教授的開放創新著作
裡，特別討論到典型的內部 RD 團
隊，不再是公司重要的策略資產

Startup Engineering
Startup 和 Startup Engineering 是⼀一種互補關係。Moko365 今天如果
專注在 Startup Engineering 層⾯面，它可以和許多資源與資⾦金更多的
Startup 投資公司合作。例如：appWorks 或是台灣創意⼯工場

Startup Engineering Camp Guide to HTML5, JavaScript and Lean Development

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Startup Engineering Camp Guide to HTML5, JavaScript and Lean Development

Similar to Startup Engineering Camp Guide to HTML5, JavaScript and Lean Development (20)

More from Jollen Chen

More from Jollen Chen (19)

Recently uploaded

Recently uploaded (20)

Startup Engineering Camp Guide to HTML5, JavaScript and Lean Development