Web Frontend 完整訓練：使用 Backbone 與 Single Page 模式－第 05 期

著重 Single-page、Responsive Design 與 MVP 模式

專為企業內訓製作的 Frontend 課程

什麼是 RWD 開發？RWD 是 Single Page 模式的重點之一。RWD 的全名是 Responsive Web Design，中文翻譯為「響應式網頁」，也就是製作的 Web Frontend 能同時在手機、平板與 PC 上自動調整排版。本課程使用最受歡迎的 Bootstrap CSS Framework 來製作 RWD 前端頁面。

Frontend 並不等於 Web 版面設計，更不只是網頁製作。因此，本課程的最重要目標，是帶領學員，建立完整且正確的 Frontend 開發知識，並以 Backbone.js 做為前端的開發框架。本課程更是平面設計師，認識 Web Frontend 開發的基礎課程。學員受訓後，將具備 SPA 與 RWD 的前端開發能力。課程目標：導入最重要的 Single Page Application（SPA）模式，來開發使用體驗良好的 Frontend。課程包含 SPA、Bootstrap CSS 框架、Backbone、整合 REST API、Key-value 觀念、LESS、AMD、MVC 模式等。—Moko365 Team

本課程的重要性

HTML5 的 Frontend 開發技術與觀念，甚至使用的工具，都和過去有很大的差別
Single Page Application（SPA）是未來 Web 的主流架構
帶領平面設計師，正確有效率地進入 Frontend 領域

HTML5 與 CSS 之後的下一步？

本課程的設計，適合學習過 HTML5 與 CSS，還想更進一步建立 Frontend 能力的工程師。

Frontend 工程師的重要課題？

學習 Backbone、Bootstrap、MVP 模式等，是 Frontend Engineering 的馬步。

課程代號

AP101

課程簡介

本課程於 2016 年 02 月 01 日完成改版（第二版）
建立正確的 Frontend 開發能力
以 Single Page Application 模式開發 Frontend
使用 Backbone 設計 Single Page Application 架構，引導學員建立架構導向思維，而不是網頁製作思維
學會使用 Single Page Application 來整合 REST API（雲計算）
開發 Responsive Web Design 的 Frontend 與移動應用

課程大綱

上課時數：12 小時，共計 2 天。

時程	上課大綱	講師
第 1 天 09:30 am－04:30 pm	第 01 堂課：Frontend JavaScript 設計模式 Instantiable Function 與 Object Constructor Pattern Inheritance 與 Prototype 的觀念使用 JavaScript Prototype Organizing Code：MVC 簡介第 02 堂課：Frontend 發展史：從平面設計到 SPA 模式從 Web Pages 到 Web App 談 HTML5 標準：Web Application 談 Frontend 技術：不是平面設計從平面設計到 Frontend：不一樣的排版與切版技術第 03 堂課：Single Page Application 入門使用 Backbone 設計 SPA 架構使用 Backbone 整合 REST API（Backend） Key-value Paris 的觀念與應用使用 Underscore Template 學習 ViewModel 的觀念第 04 堂課：CSS 與 Responsive Web Design SASS 語法教學撰寫 Media Query 使用 Bootstrap 建立網頁 Bootstrap 與 Responsive Design 第 05 堂課：使用 AMD 認識 Common.js 使用 Require.js JavaScript Closure 與 Lambda 觀念第 06 堂課：MVC, MVP 與 MVVM MVC, MVP 與 MVVM 觀念介紹實作 MVC 與 MVP 模式認識 Backbone 的設計精神使用 Backbone 實作 MVVM 架構井字遊戲 (TicTacToe) 與設計模式的演練	Jollen
第 2 天 09:30 am－04:30 pm	第 07 堂課：RESTful 與 API 導向架構認識 Service-Oriented 的觀念 REST 標準與 RESTful 架構定義與設計 REST API Presentation 與 API 導向架構建立 API 導向架構的開發思惟第 08 堂課：深入 Backbone.js 為什麼需要 Backbone.js？ Backbone View 深入討論 Backbone Model 深入討論第 09 堂課：Backbone Model 與 Collection 關於 Attributes Listening Changes 建立與更新 Model 認識 Collection Module Pattern 與 Backbone View Module Pattern 與 Collection、Model 第 10 堂課：建構 Backbone Application Backbone Views DOM 與 UI Controls Data 與 Meta-data Application Components 使用 Require.js 組織 Backbone Code 使用 Marionette.js for Backbone	Jollen

先備知識

基本科目：認識 HTML5 與 CSS 語法
程式能力：能撰寫基本的 JavaScript 語法
軟體能力：了解基本的 JavaScript 設計模式
HTML5 零基礎初學者，建議可先修「HTML5 與 JavaScript：Web Fullstack 開發入門」課程，以建立基本的開發能力。
有網頁製作基礎，但沒有 HTML5 App 經驗者者，建議可先修「HTML5 與 JavaScript：Web Fullstack 開發入門」課程，以建立基本的 HTML5 App 思維能力。
沒有 JavaScript Closure 與 Module Pattern 觀念者，建議可先修「HTML5 與 JavaScript：Web Fullstack 開發入門」課程，學習基本的 JavaScript 設計模式。

報名費用

NT$ 15,800（上課時數 12 小時，共計 2 天）

優惠方案

開課前一週，天天早安鳥；開課前完成繳費享有「早安鳥」88 折優惠價（NT$ 13,900），我要早安鳥報名
持 VIP Code 或仕橙會員卡，再折 NT$ 1,000
持仕橙折價卷：依面額折抵，一門課程限用一張，可搭配 VIP Code 或仕橙會員卡使用
持仕橙折價卷的學員，請於填寫報名表時勾選，並於開課當日繳交，如無法繳交折價卷者，須補繳課程費用

開課時間

日期：2016 年 05 月 28、29 日，仕橙版第 05 期
時間：09:30～12:00，13:00～16:30（09:00 AM 開始報到）

開課紀錄

仕橙版第 05 期：將於 2016 年 05 月 28 日開課（台北）
仕橙版第 04 期：已於 2015 年 05 月 24 日結訓（台北）
仕橙版第 03 期：已於 2014 年 11 月 16 日結訓（台北）
仕橙版第 02 期：已於 2014 年 07 月 27 日結訓（台北）
仕橙版第 01 期：已於 2014 年 03 月 16 日結訓（台北）