startup eng-camp 3
Post on 10-May-2015
733 Views
Preview:
TRANSCRIPT
Startup Engineering
Camp #3www.moko365.com
靜宜⼤大學2013/10/19、10/20
Jollen Chen <jollen@moko365.com> / FounderHank 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
mokocrushlearning by doing
HTML5 and <div>CanvasJavaScriptWebSocketsFeature detectionSwapping itemsMatching three
moko365
Startup Engineering Course at Standford
來源：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
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
Extract the project structure
The Project Structure
.
.bowerrc
.editorconfig
.gitignoreGruntfile.jsLICENSEbower.jsonpackage.json|-public |---css |---fonts |---images |---js |---vendor |-----bootstrap |-----jquery|-fixes|-sass|-schema|-scripts|-utilities|-views
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
1. CSS framework and grid system2. Fast prototyping3. Revamp your workflow
Bootstrap
http://mashable.com/2013/04/26/css-boilerplates-frameworks/
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
1. Easy to seperate and manage layouts2. Use a HTML5 template engine
Page Layout Manager
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
Choose Languages
Programming languagesTemplate engine languagesStylesheet languages
JavaScript + Jade + SASS
http://jade-lang.com
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
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
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
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)
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
HTTP API 的形式
http://localhost:8888/send?m=hello&u=jollen
API Query string
Pathname URL (⼀一種 URI 形式)
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
Response ContentHTML Document
XML Document
JSON Data
Base64 encode (⽤用於 Binary 檔案)
亦可⾃自定
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
HTTP APIWeb Service API (Open API) over HTTP
以 JSON 格式回應資訊
Client 與 Server 的互動架構
GET 是⼀一種 HTTP 請求⽅方式 (HTTP Methods)
基於 HTTP Methods 以 HTTP API 的系統架構
➡ REST
➡ RESTful
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
Web Service
RESTfulCRUDInvoke Web service in Backbone way
JavaScript + Jade + SASS + Backbone + REST
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
REST
Resource Oriented ArchitectureA resource is indentified by a URI
URI 的定義有標準規範
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
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
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
Model, View and Control
Views and TemplatingHandlebars.js and Underscore’s template
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
Use MVC for Frontend JavaScript
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
Model, View and Control
Spine.js and Backbone.js
Spine.js or Backbone.js
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
Model, View and Control
manage the data for an applicatione.g. Backbone "collections"
Manage Data as Collections
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
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.
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
MVC to MPV
Mobile firstHTML5 is good at responsive design.Bootstrap 3 is mobile first.
Prototyping
Architect
Frontend
Organize
Lean Development
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
Frontend vs Backend
HTML5JavaScriptPrototype
CSS3DOM
jQueryBackbone
Unit Testing
NodejsExpress
MongoDBGruntREST
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
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)
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
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/
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
More Best Practice ?
Use stylesheet language
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
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
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
Lean Software Development源⾃自⽇日本 Toyota 的⽣生產系統
由 Agile 社群將之導⼊入軟體⼯工程領域，成為敏捷開發模式的重要思想基礎
Mary Poppendieck 與 Tom Poppendieck 將其發展成⼀一套系統化的模式
22 Tools、7 Principles
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
Open Source Way⾃自我組織型（Self-Organized）的研發團隊
Kanban ⽅方法論
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
7 PrinciplesEliminate Waste
Amplify Learning
Decide as Late as Possible
Deliver as Fast as Possible
Empower the Team
Build Integrity In
See the Whole
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
Typical Project Management
Collect Requirements
Define Scope
Create WBS
Verify Scope
Control Scope
Project scope management
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
See the Waste
Booklog.io
Setup a Goal
Fast Prototyping
Implement REST
Documentation
《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
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 或是台灣創意⼯工場
top related