startup eng-camp 3

Startup Engineering

Camp #3www.moko365.com

靜宜⼤大學2013/10/19、10/20

Jollen Chen <[email protected]> / FounderHank Wang <[email protected]> / Software Developer

本著作係採⽤用創⽤用 CC 姓名標⽰示-⾮非商業性-禁⽌止改作 3.0 Unported 授權條款授權.

http://www.MOKOVERSITY.com






mailto:[email protected]




Founder and CEO, Moko365 Inc <[email protected]>

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 <[email protected]>

Jointly development of sociable networking web and also develope in Android and iOS App.Skills: JavaScript, Python, iOS...etc





mokocrushlearning by doing

HTML5 and <div>CanvasJavaScriptWebSocketsFeature detectionSwapping itemsMatching three

















moko365

Startup Engineering Course at Standford

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

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

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

moko365

AWSHeroku

JavaScriptCoffeeScript

Node.jsExpress

SequelizePostgreSQLBootstrap

phantom.jsAngular

BackboneSublimeemacs vi

JSONLESS

SCSS SASSGrunt

Future Courses





moko365

<!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>

HTML5 AppsSingle page application



Prototyping

Architect

Frontend

Organize

Lean Development






1. CSS framework and grid system2. Fast prototyping3. Revamp your workflow

Bootstrap

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




1. Easy to seperate and manage layouts2. Use a HTML5 template engine

Page Layout Manager


Choose Languages

Programming languagesTemplate engine languagesStylesheet languages

JavaScript + Jade + SASS

http://jade-lang.com




Understanding Jade

doctype 5html(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



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

Prototyping

Architect

Frontend

Organize

Lean Development






Client/Server Architecture

Presentation(HTML5/CSS/JavaScript)

Browser

Browser Engine

Operating System

Camera Sensor ...

RESTful API(HTTP and JSON)

Business Logic & Service

MySQL I/O ...

Application Server

Over HTTP(Cloud)

HTTP(URI)


HTTP API 的形式

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

API Query string

Pathname URL (⼀一種 URI 形式)

http://localhost:8888/start?q=android&app=moko365

http://localhost:8888/start?q=android&app=moko365


Response ContentHTML Document

XML Document

JSON Data

Base64 encode (⽤用於 Binary 檔案)

亦可⾃自定


HTTP APIWeb Service API (Open API) over HTTP

以 JSON 格式回應資訊

Client 與 Server 的互動架構

GET 是⼀一種 HTTP 請求⽅方式 (HTTP Methods)

基於 HTTP Methods 以 HTTP API 的系統架構

➡ REST

➡ RESTful


Web Service

RESTfulCRUDInvoke Web service in Backbone way

JavaScript + Jade + SASS + Backbone + REST


REST

Resource Oriented ArchitectureA resource is indentified by a URI

URI 的定義有標準規範


REST Object Example

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

POST /user/jollen/2048



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

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

Nodejs、Bootstrap

Prototyping

Architect

Frontend

Organize

Lean Development






Model, View and Control

Views and TemplatingHandlebars.js and Underscore’s template

http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns

Use MVC for Frontend JavaScript













Spine.js and Backbone.js

Spine.js or Backbone.js







manage the data for an applicatione.g. Backbone "collections"

Manage Data as Collections








MPVModels, Views & Presenters

MVP is generally used most often in enterprise-level applications where it's necessary to reuse as much presentation logic as possible.


MVC to MPV







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

Prototyping

Architect

Frontend

Organize

Lean Development






Frontend vs Backend

HTML5JavaScriptPrototype

CSS3DOM

jQueryBackbone

Unit Testing

NodejsExpress

MongoDBGruntREST


Best Practice to Frontend JavaScript

https://shanetomlinson.com/2013/testing-javascript-frontend-part-1-anti-patterns-and-fixes/

JavaScript closure (module)

Use // {BEGIN|END} TESTING API

Use Instantiable Objects

Separate DOM event handlers from the action it performs

(http://goo.gl/HpT7p6)





http://goo.gl/HpT7p6

http://goo.gl/HpT7p6


Best Practice to Frontend JavaScript

Mock in XHR requests

Asynchronous programming requires notifications

externalize all scripts

Use callbacks

https://shanetomlinson.com/2013/writing-testable-javascript-part-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() 視為 constructorvar person = new Person("Jollen", "Software Developer");

alert(person instanceof Person); // true

Prototyping

Architect

Frontend

Organize

Lean Development






Lean Software Development源⾃自⽇日本 Toyota 的⽣生產系統

由 Agile 社群將之導⼊入軟體⼯工程領域，成為敏捷開發模式的重要思想基礎

Mary Poppendieck 與 Tom Poppendieck 將其發展成⼀一套系統化的模式

22 Tools、7 Principles


Open Source Way⾃自我組織型（Self-Organized）的研發團隊

Kanban ⽅方法論


7 PrinciplesEliminate 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

Collect Requirements

Define Scope

Create WBS

Verify Scope

Control Scope

Project scope management


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 eng-camp 3

Technology