Startup eng-camp 3
Upcoming SlideShare
Loading in...5
×
 

Startup eng-camp 3

on

  • 792 views

 

Statistics

Views

Total Views
792
Views on SlideShare
792
Embed Views
0

Actions

Likes
1
Downloads
12
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Startup eng-camp 3 Startup eng-camp 3 Presentation Transcript

  • 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
  • The Project Structure Extract the project structure . .bowerrc .editorconfig .gitignore Gruntfile.js LICENSE bower.json package.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.
  • Bootstrap 1. CSS framework and grid system 2. Fast prototyping 3. Revamp your workflow http://mashable.com/2013/04/26/css-boilerplates-frameworks/ 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • Page Layout Manager 1. Easy to seperate and manage layouts 2. Use a HTML5 template engine 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • Choose Languages Programming languages Template engine languages Stylesheet languages JavaScript + Jade + SASS http://jade-lang.com 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • 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 Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • Startup keeping up on new technologies, doing quick evaluations, and then snapping the pieces together
  • Prototyping Architect Organize Frontend Lean Development
  • 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) 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • HTTP API 的形式 API Query string http://localhost:8888/send?m=hello&u=jollen Pathname URL (⼀一種 URI 形式) 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • Response Content HTML Document XML Document JSON Data Base64 encode (⽤用於 Binary 檔案) 亦可⾃自定 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • HTTP API Web 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 RESTful CRUD Invoke Web service in Backbone way JavaScript + Jade + SASS + Backbone + REST 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • REST Resource Oriented Architecture A 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 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • Nodejs、Bootstrap 矽⾕谷眾多的 Startups 正是以 JavaScript、 Nodejs、Bootstrap 等技術,來打造軟體產品 台灣有許多新創公司,也都使⽤用上述提到的技術在開發服務
  • Prototyping Architect Organize Frontend Lean Development
  • 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 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • Spine.js or Backbone.js Model, View and Control Spine.js and Backbone.js 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • Manage Data as Collections Model, View and Control manage the data for an application e.g. Backbone "collections" 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • 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 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • Mobile first HTML5 is good at responsive design. Bootstrap 3 is mobile first.
  • Prototyping Architect Organize Frontend Lean Development
  • Frontend vs Backend HTML5 JavaScript Prototype CSS3 DOM jQuery Backbone Unit Testing Nodejs Express MongoDB Grunt REST 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • 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/ 《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-javascriptpart-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() 視為 constructor var person = new Person("Jollen", "Software Developer"); alert(person instanceof Person); // true 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • Prototyping Architect Organize Frontend Lean Development
  • 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 Principles Eliminate 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 Project scope management Collect Requirements Define Scope Create WBS Verify Scope Control Scope 《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 《Startup Engineering Camp》 Copyright (C) 2013 Moko365 Inc. All rights reserved.
  • Open Innovation Hacker、社群、GPLv2 與 Apache、⾃自由軟體與 Open source,都是開放創新的元素 Chesbrough 教授的開放創新著作 裡,特別討論到典型的內部 RD 團 隊,不再是公司重要的策略資產
  • Startup Engineering Startup 和 Startup Engineering 是⼀一種互補關係。Moko365 今天如果 專注在 Startup Engineering 層⾯面,它可以和許多資源與資⾦金更多的 Startup 投資公司合作。例如:appWorks 或是台灣創意⼯工場