 |
-- 會員 / 註冊 --
|
 |
|
|
|
跨終端 Web ( 簡體 字) |
| 作者：徐凱 | 類別：1. -> 程式設計 -> 綜合 |
| 譯者： |
| 出版社：電子工業出版社 |  3dWoo書號： 38737
詢問書籍請說出此書號！【有庫存】
NT售價： 275 元 |
| 出版日：6/1/2014 |
| 頁數：240 |
| 光碟數：0 |
|
站長推薦：   |
| 印刷：黑白印刷 | 語系： ( 簡體 版 ) |
| |
加入購物車  │加到我的最愛
(請先登入會員) |
| ISBN：9787121233456 |
| 作者序 | 譯者序 | 前言 | 內容簡介 | 目錄 | 序 |
| (簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證) |
| 作者序： |
| 譯者序： |
前言：推薦序
2012年年底，我從云OS運營團隊轉崗到天貓前端團隊，之前和手機硬件廠商、Mobile OS及App市場的合作經歷讓我重新思考前端的未來和電子商務的技術方向。除了在天貓內部實踐基于移動優先（Mobile First）的設計研發外，還和InfoQ合作把Qcon北京2013的前端議題定為“跨終端Web”，于是就有了采訪稿《從可編程到跨終端——QCon北京2013“跨終端的Web”專題出品人鄢學?專訪》 ，闡述當時的認知和想法。現在“跨終端Web”已經誕生一年半了，鬼道同學把這些想法和實踐都編寫成書實在讓人驚喜和敬佩，我有幸成為這個成就的見證人，并再次有機會和大家談談跨終端Web的初心和思考。
1991年誕生了World Wide Web、HTTP和HTML，1995年誕生了JavaScript、Java和PHP，1996年誕生了CSS，1998年CSS 2.1正式發布，1999年CDN誕生且HTTP 1.1和HTML 4.01正式發布，2000年ECMA-262 3rd正式發布，2001年IE 6發布。作為Web開發者和前端工程師的我們應該對這些大事件相當不陌生，但如果你仔細看看這些年份就會發現我們所使用的絕大部分技術和方案都比IE 6老。在那個時期沒有真正意義的前端，常見情況是美工切圖，后端嵌套模板，也沒有所謂的前端架構，前后端的發布機制幾乎一樣，那就是門戶盛行的時代，Yahoo、新浪、搜狐和網易當道。
IE 6是第一輪瀏覽器大戰的勝者，壟斷式的勝利直接導致Web基礎設施至少10年的緩慢發展，標準的意義也就不那么明顯了。其實1994年就有了W3C，但民間為了解決W3C面對瀏覽器廠商不給力的混亂狀況于1998成立了WaSP（The Web Standards Project），其中一個創始人于2003年發表了影響力巨大的著作《Design with The Standards（網站重構）》，當然在中國產生了估計作者都沒有想到的額外影響，那就是出現了重構工程師。2004年Firefox 1.0、Gmail和Google Sugguest發布，2005年AJAX橫空出世和Google Maps發布，2006年jQuery和YUI發布。這些事件的到來顯示出了低成本的Web在跨瀏覽器上的巨大威力和人機交互的顯著改善，導致當時互聯網99%以上內容都是使用Web來呈現的，所以對于當時絕大部分人而言，WWW就是互聯網。巨大的需求導致Web開發的規模化和專業分工，這就是前端工程師開始出現并大量集結于以Web業務為主的互聯網公司的原因。
我們可以稱這個時代為前端工程師1.0，比如在Google、Facebook、Yahoo、阿里巴巴、百度、騰訊等公司中，前端團隊小有規模且以Web開發為主，此時的前端工程師們大量使用HTML、CSS、JavaScript開發基于桌面瀏覽器的網頁和應用。這個時代的前端工程師主要具備3個方面的能力，一是跨瀏覽器的兼容能力，需要理解漸進增強和優雅退化的思想，深入Web標準并結合環境數據制定GBS（Graded Browser Support瀏覽器分級標準）；二是富交互Web的開發能力，能夠基于，甚至開發JavaScript庫去實現人和機器的復雜互動；三是性能優化能力，實踐表明前端占Web性能80%，類似CDN和按需加載等各種性能優化方案深度地影響了前端架構和發布機制。
雖然今日市面上大部分前端工程師招聘條件還是基于前端工程師1.0的，但我們的環境自2007年iPhone發布起就在悄然卻快速地變革，我們可能是家里唯一使用電腦的那個人，而手機在吃飯、走路、約會、上廁所等時都已經成為不可或缺的陪伴。當我還在云OS做運營時，便有一個令人震驚的發現：人類發展五千年到現在的最大共同點可能是每人都有移動智能設備。人們已經處于各種各樣碎片化的智能移動設備上，這些設備有觸摸屏、相機、麥克風、陀螺儀、加速計等特性，使得人同機器交互的方式發生了巨大的革命，更重要的是它們都和網絡連接，沒有了離線狀態。于是，當一個人在大街上看到奇聞異事隨手用手機拍下來并發到微博上，TA的朋友可能在手機、平板電腦或普通電腦的微博上看到并轉發，也可能被TA的朋友轉到微信或IM等，TA朋友的朋友同樣可能在手機、平板電腦或普通電腦的另一種軟件上看到這個信息，甚至信息被電視媒體或平面媒體發現并造成更大范圍的傳播，更多TA不認識的電視或平面媒體通過掃描報道時的二維碼又找到TA的微博，這一切可能在瞬間完成。這個小場景告訴我們人和信息是在智能終端（Phone、Pad、Desktop、TV等設備）、軟件終端（瀏覽器、SNS、IM等應用）和傳統終端（電視、廣播、平面等媒體）間交叉流動的，這是一個去中心的網狀結構，也是互聯網的本質特性，所以跨終端不僅僅是跨越設備（device），更是跨越人機交互的場景入口（end）。
面對這種終端碎片化的潮流，前端工程師怎么辦？解決方案就是基于最重要的前端開發思想漸進增強和優雅退化得出的移動優先：一是毫無疑問絕大部分用戶已經或正在成為智能設備用戶，我們要為80%的目標用戶服務；二是專注于核心業務需求，人的本性、業務本質和商業模式本質基本上不會隨著終端改變而改變，所以相同業務在手機、平板、桌面和電視上呈現的本質和商業模式不會有不同，小屏幕終端是我們重新思考業務本質和核心人機交互流程的機會，其挖掘出的本質會改變其他終端；三是針對未來人機交互，現在移動設備引領人機交互的變革潮流，通過必備特性虛擬或增強現實，并逐步引入到桌面和電視等設備中。所以，選擇哪個具體技術方案，是響應式Web，還是服務端響應式Web（URL不變，通過服務端在不同設備展現不同模板），還是多個URL Web（不同的終端，不同的URL），還是Hybrid應用（Native和Web混合使用，比如iOS App Store一直就是引用殼里面套個網站），還是Native應用，是依據業務本質、人性需求和人機環境趨勢來綜合判斷的。由于Web的本質特性就是低成本跨平臺但對設備先進特性支持不夠，而Native應用能夠充分利用硬件先進特性但受限于系統平臺，導致開發者沒有發布能力，所以大多數情況下，可以把跨終端Web作為默認選擇。
在跨終端的時代，漸進增強和優雅退化依舊是最重要的前端開發思想，但前端工程師們不能像以前一樣僅僅固守在Web上，Web和客戶端應用的融合已經成為必然，Web從頁面（page）到應用（application）反映了人機交互革命帶來新的體驗趨勢，客戶端和動畫開發成為了前端工程師的基本功。移動優先的跨終端解決方案核心是一套數據有多個高品質低成本展現方式，這促使前后端分離成為必需，前端工程師不僅僅要關心客戶端環境也要關心服務端環境，所以GBS需要升級到GTE（Graded Target Environments，分級目標環境），工程師更關注端到端的數據接口約定（比如正文中的IF就是這種思想下的一種實踐方案），這會徹底改變前端的開發方式、架構和發布機制，也會導致前端團隊快速膨脹直到前后端比率趨于一致。這是一個巨大的挑戰，也是一個前所未有的機會，更是時勢的要求。我把這個時代叫作前端工程師2.0。
這篇推薦序被我拖延了很久很久，結尾之時恰逢鬼道同學入職天貓一周年，就拿老喬的話來zhuangbility一下：“你如果出色地完成了某件事，那你應該再做一些其他的精彩事兒。不要在前一件事上徘徊太久，想想接下來該做什么。”這應該是最好的禮物之一。
三七
2014.4.8
前言
移動互聯網不可阻擋地進入了我們的生活。筆者將自己在百度和天貓期間的跨終端Web的開發實踐轉化為書中的技術方案和實現，呈現給各位讀者。
本書大綱來自于筆者2013年7月在D2上的主題分享“移動優先的跨終端Web” ，2013年11月W3CTECH 2013上做了第二次分享 。
面向對象
本書適合有一定PC Web基礎，希望迅速了解Mobile Web，致力于PC和Mobile Web技術融合的讀者。
本書的第1章、第3章、第5章面向所有的讀者，即使您對Web技術毫無了解，仍可以順利閱讀下來。本書其他章節假定您對PC Web前端技術已經有所了解，知道HTML、CSS、JavaScript這些名詞的含義，并且動手寫過一個頁面。
章節簡介
第1章闡述了移動互聯網的現狀和遇到的問題，提出了跨終端Web的概念以及實現跨終端Web的多重途徑，破除了“唯Media Query論”，并引入移動移先的概念，豐富跨終端Web的內核。
第2章從對比PC Web的角度介紹了Mobile Web的技術基礎，并對遠程調試、兼容性等開發問題做了詳盡的闡述。
第3∼7章是全書的核心，按照開發流程組織，逐步講解了實現跨終端Web所需要的各類技術基礎設施，包括：
基準，給出了調試和測試過程中的基準，確定調試和測試的范圍。
檢測，探討如何構造一個為全站服務的終端屬性檢測工具。
接口，探索實現流程復用的途徑及端到端的接口規范（IF）。
定位，分別介紹了基于Hash和基于History API的跨終端定位方案。
預覽，介紹了實現跨終端預覽的方案，并給出一個簡化的實現。
第8章介紹了Hybrid App的發展歷程、實現細節以及成熟的框架，并詳細分析了以傳感器為核心的Device API。
第9章的跨終端存儲方案（Storage）是筆者參加“2013 Kissy Gallery組件大賽”時的冠軍作品。
第10章完整介紹了如何通過腳本錄制和回放來實現跨終端動作同步。
感謝
感謝三七（鄢學?），“跨終端Web”這個概念最早由三七提出，感謝三七為本書寫序以及在本書寫作過程中給予的支持。三七是位充滿智慧的前端架構師和優秀的管理者，從他那得到的啟示遠不止跨終端Web，在此一并謝過。
感謝舒文（舒文亮），他為本書第4章“檢測”寫了初稿。舒文帶領跨公司的團隊實現了服務于全阿里的多終端檢測（MED）系統。
感謝惜朋（沙峰），他為本書第10章“動作同步”撰寫了“腳本錄制和回放”的初稿，并實現了其中的Demo。
感謝閉月（吳燕云）和蔡倫（盛柳欽），他們為本書第7章“預覽”提供了Focus截圖和服務端代碼。閉月和蔡倫的家庭新成員即將誕生，在此祝福小生命為他們的生活帶來更多的歡樂。
感謝IF項目虛擬團隊的蔣壯（王躍樂）、勞謙（董松潔），他們分別為IF在測試和后端領域內的擴展做了開拓性的工作。
鬼道 于2014-02-23 |
內容簡介：移動互聯網不可阻擋地進入了我們的生活。作者將自己在百度和天貓期間的跨終端Web的開發實踐轉化為書中的技術方案和實現，呈現給各位讀者。第1章提出了跨終端Web的概念以及實現跨終端Web的多重途徑，第2章主要介紹Mobile Web的技術基礎，第3∼7章是全書的核心，按照開發流程組織逐步講解了實現跨終端Web所需要的各類技術基礎設施，第8章主要介紹了Hybrid App的發展歷程、實現細節以及成熟的框架，第9章介紹的跨終端存儲方案（Storage）是作者曾經的冠軍作品，第10章完整介紹了如何通過腳本錄制和回放來實現跨終端動作同步。 |
目錄：目錄
1 跨終端Web 1
1.1 終端VS.設備 1
1.2 一個貫穿全書的例子 2
1.3 后續章節 3
1.4 移動優先 4
1.4.1 移動流量暴增 4
1.4.2 聚焦業務本質 5
1.4.3 人機交互擴展 7
1.4.4 再說書名 8
1.5 不只是響應式 8
1.5.1 響應式 8
1.5.2 多站點 13
1.5.3 多模板 13
1.5.4 多平臺 15
1.6 解決方案 16
2 Mobile Web 17
2.1 HTML5 18
2.2 HTML 19
2.2.1 移動頁面模板 19
2.2.2 Viewport 21
2.2.3 touch-icon 26
2.2.4 其他 27
2.3 觸屏事件 27
2.3.1 觸屏事件一覽 27
2.3.2 通用觸屏事件 28
2.4 調試 31
2.4.1 遠程調試 31
2.4.2 設備調試 43
2.5 兼容性 44
2.5.1 OS版本碎片化 44
2.5.2 國內的特殊情況 46
2.5.3 WebView 46
2.5.4 更多工具 46
2.6 文檔 48
3 基準 51
3.1 GBS 51
3.2 MGBS 53
3.2.1 準備 53
3.2.2 操作系統分級 54
3.2.3 屏幕分辨率分級 65
3.2.4 瀏覽器分級 71
3.2.5 MGBS 73
3.3 GTE 75
3.3.1 分層設計 76
3.3.2 核心層 76
3.3.3 數據層 78
4 檢測 81
4.1 終端 81
4.1.1 什么是終端 81
4.1.2 分類 82
4.2 終端檢測 82
4.2.1 場景 82
4.2.2 原理 83
4.2.3 實現 85
4.3 遺留問題 86
4.3.1 硬件信息 86
4.3.2 更精準的終端檢測 86
5 接口 87
5.1 跨終端流程復用 87
5.1.1 示例1 87
5.1.2 示例2 88
5.2 IF 89
5.2.1 始于一次重構 90
5.2.2 新的環境 95
5.2.3 模型 95
5.2.4 解決方案 96
5.2.5 架構 96
5.2.6 路線圖 99
5.3 if-spec 2.0 102
5.3.1 JSON Schema 102
5.3.2 Demo 109
5.3.3 meta 113
5.3.4 if-spec 1.0 114
5.4 if-mock 2.0 116
5.5 if-guide 2.0 118
5.6 總結 122
6 定位 125
6.1 定位 126
6.1.1 Hash 126
6.1.2 History API 127
6.1.3 視圖定位 129
6.2 數據 129
7 預覽 131
7.1 客戶端 132
7.2 服務端 133
7.3 示例 136
8 Hybrid App 139
8.1 Hybrid簡史 139
8.1.1 背景 139
8.1.2 簡史 140
8.1.3 現狀 142
8.2 Hybrid技術 144
8.2.1 Native調用Web 144
8.2.2 Web調用Native 144
8.2.3 Bridge 146
8.3 Hybrid框架 150
8.3.1 PhoneGap 151
8.3.2 Titanium 152
8.4 Device API 153
8.4.1 動作傳感器 156
8.4.2 環境傳感器 158
8.4.3 音頻 159
8.4.4 視頻 160
8.5 小結 160
9 存儲 161
9.1 狀態持久化 162
9.2 技術方案 163
9.2.1 整體方案 163
9.2.2 跨終端存儲方案 164
9.2.3 跨域通信方案 166
9.2.4 安全性 168
9.2.5 遺留問題 168
9.3 使用 168
9.3.1 實例化 169
9.3.2 set/get 169
9.3.3 remove/clear 170
9.3.4 推薦命名 170
10 動作同步 171
10.1 原理 171
10.1.1 案例 171
10.1.2 動作同步 172
10.2 實現 173
10.2.1 Selenium 173
10.2.2 腳本錄制和回放 174
附錄A GBS 183
附錄B JSON Schema Core 189
附錄C JSON Schema Validation 201
附錄D if-spec 2.0 221
作者簡介 225 |
| 序： |
|
