今年第三次參加 D2 大會(huì)了, 和前兩年體感有很大不同, 但收獲同樣不少.
- 開(kāi)場(chǎng): 前端 = 渲染引擎 + web 標(biāo)準(zhǔn). 前端方向: 能力 + 體驗(yàn) + 生態(tài).
- IoT: 兩個(gè)場(chǎng)景 + 擴(kuò)展場(chǎng)景 + 自己的疑問(wèn)
- 個(gè)人成長(zhǎng): 前端的 5 個(gè)大方向, 和 3 個(gè)關(guān)鍵點(diǎn)
- 貓超不一樣的視角: web 真的慢嗎?
開(kāi)場(chǎng)
@圓心老師 開(kāi)場(chǎng)講的兩句話, 記憶比較深刻
前端 = 渲染引擎 + Web 標(biāo)準(zhǔn).
我對(duì)他的理解, 前端不需要分 iOS 和 Android, Web 等等, 更高層次去看的話, 都是渲染引擎 + web 標(biāo)準(zhǔn). 其中渲染引擎, 雖然可能只有 native 和 web 之分, 但如果分運(yùn)行時(shí)的話, 還包括 webkit, weex, react native 等, (我這么說(shuō)其實(shí)也并不是特別準(zhǔn)確).
我覺(jué)得重點(diǎn)是后半句, web 標(biāo)準(zhǔn) ! 這句話, 讓我想起之前看到的另外一句話[1]:
在移動(dòng)時(shí)代沒(méi)有找到一個(gè)比HTML/CSS/JS更合適描述界面和表達(dá)業(yè)務(wù)的方式怎诫，當(dāng)前智能手機(jī)GUI體系只是對(duì)HTML拙劣的逼近和模仿镀首。Weex/RN從某種意義上是必然的產(chǎn)物
所以, 結(jié)合在一起看的話, 前端做的所謂技術(shù), 都是圍繞 渲染引擎 和 web 標(biāo)準(zhǔn) 來(lái)進(jìn)行.
前端的核心有了, 那未來(lái)的方向和體系怎么建設(shè)?
能力 + 體驗(yàn) + 生態(tài)
-
能力: 更多會(huì)是 web 能力的擴(kuò)展, 比如: 前端的 Push, 離線, 桌面的觸達(dá), 后臺(tái)進(jìn)程, 攝像頭, 麥克風(fēng), U盤(pán)等等, 其中有一部分是 PWA 已經(jīng)在做的事情 (包括 Service Worker, iOS 也正在支持), 其他的能力, 其實(shí) Chrome 做得也是很不錯(cuò)了, 畢竟有 Chrome OS 這樣的存在.
<img width="50" alt="dingtalk20171217121607" src="https://user-images.githubusercontent.com/7157346/34076502-3a6ac89c-e324-11e7-98cb-8f8526a5485a.png">
當(dāng)然, 這其中還包括其他和前端有光的能力, 如: 圖形, 數(shù)據(jù)可視化能力, IoT 能力, 管理能力等等
-
體驗(yàn), 我覺(jué)得可以分:
- 開(kāi)發(fā)者體驗(yàn), 開(kāi)發(fā)者的體驗(yàn)其實(shí)有了很多的表現(xiàn), 其實(shí)也體現(xiàn)在工程效率和開(kāi)發(fā)效率上, 比如: VSCode 替代 Sublime, 還有最近出的 Parcel 打包工具, 也是在某種程度上解決了開(kāi)發(fā)中對(duì) webpack 某些痛點(diǎn)(當(dāng)然, 打包效率的提升可能會(huì)更關(guān)鍵些), 還有很多的
out of box( 開(kāi)箱即用) 的庫(kù)和模塊也比以前更多了. - 用戶體驗(yàn), 這點(diǎn)可以不用過(guò)多展開(kāi), 為用戶考慮
流暢度(性能優(yōu)化),便捷性(產(chǎn)品設(shè)計(jì)的合理性),美觀(設(shè)計(jì)視覺(jué), 不要忘記 D2中的一個(gè) D) 等等, 更多地站在用戶的角度想問(wèn)題, 得到的也會(huì)更多.
- 開(kāi)發(fā)者體驗(yàn), 開(kāi)發(fā)者的體驗(yàn)其實(shí)有了很多的表現(xiàn), 其實(shí)也體現(xiàn)在工程效率和開(kāi)發(fā)效率上, 比如: VSCode 替代 Sublime, 還有最近出的 Parcel 打包工具, 也是在某種程度上解決了開(kāi)發(fā)中對(duì) webpack 某些痛點(diǎn)(當(dāng)然, 打包效率的提升可能會(huì)更關(guān)鍵些), 還有很多的
生態(tài), 講的應(yīng)該是開(kāi)發(fā)生態(tài), 包括開(kāi)源, 社區(qū)的建設(shè), 工具的共享, 共建等等, 特別是開(kāi)源生態(tài)的建設(shè), 也需要特別的智慧來(lái)推動(dòng)開(kāi)源的進(jìn)程. 這個(gè)在
2016 年云棲大會(huì)的云棲社區(qū)開(kāi)發(fā)者技術(shù)峰會(huì)——開(kāi)源技術(shù)專(zhuān)場(chǎng)[2] 特別有感觸.
開(kāi)場(chǎng)的干貨特別多, 前端的層次和視角也特別高, 不過(guò), 和 @小紅 同學(xué)一起在討論些問(wèn)題, 也錯(cuò)過(guò)了不少其他干貨, 可以看看直播回放再體會(huì)體會(huì)哈.
IoT
The Internet of Thing. 物聯(lián)網(wǎng), 這個(gè)有點(diǎn)讓我驚訝. 這次 D2 大會(huì), 沒(méi)想到有一個(gè)專(zhuān)門(mén)的分會(huì)場(chǎng)講 IoT, 最早聽(tīng)到 IoT 這個(gè)詞已經(jīng)過(guò)去2, 3年了吧, 不知道能和前端有什么碰撞.
雖然之前和物電的同學(xué)合作開(kāi)發(fā)過(guò)養(yǎng)雞場(chǎng)的一個(gè)類(lèi)物聯(lián)網(wǎng)系統(tǒng), 也接觸到他們開(kāi)發(fā)底層硬件的專(zhuān)業(yè)性 (電路自己畫(huà), 電板找人待加工, 元件自己焊), 不過(guò), 自己畢竟是以前端, 后臺(tái), 上位機(jī)的角色參與進(jìn)去的, 所以, 去了該會(huì)場(chǎng)尋找前端更多的可能.
來(lái)到該會(huì)場(chǎng), 首先是各種單片機(jī): Arduino, Ruff, 樹(shù)莓派. 其中樹(shù)莓派之前聽(tīng)到比較多, 不過(guò), 這次在 D2, Ruff 提的比較多.
Ruff 是一個(gè)支持 JavaScript 開(kāi)發(fā)應(yīng)用的物聯(lián)網(wǎng)操作系統(tǒng)狼渊，為軟件開(kāi)發(fā)者提供開(kāi)放渊跋、高效墩划、敏捷的物聯(lián)網(wǎng)應(yīng)用開(kāi)發(fā)平臺(tái)倦逐，讓 IoT 應(yīng)用開(kāi)發(fā)更簡(jiǎn)單。
兩個(gè)應(yīng)用場(chǎng)景
- 菜鳥(niǎo)的出入庫(kù)系統(tǒng), 需要結(jié)合 攝像頭的人臉識(shí)別, 超聲波的距離識(shí)別, 當(dāng)然也需要訂單號(hào)的掃描. 其中值得一提的是, 人臉識(shí)別是放云端的, 比較類(lèi)似 SaaS, FaaS.
- 智能樓宇的控制, 比如: 周一周五的電燈控制, 一個(gè)空間達(dá)到多少 wifi 的接入, 自動(dòng)開(kāi)啟空凋進(jìn)行控溫. 這里難度比較大, 或工作量比較大的的各個(gè)設(shè)備的不同協(xié)議的接入. 需要對(duì)接各種上個(gè)世紀(jì)的通訊協(xié)議, 或者廠商的私有協(xié)議, 還有包括 Wifi, Bluetooth, ZigBee 之類(lèi)的通訊協(xié)議. (這是一個(gè)比較大的痛點(diǎn), 不過(guò), 這一點(diǎn)小米做的比較好, 在整個(gè)生態(tài)起來(lái)之后, 在做自己的協(xié)議標(biāo)準(zhǔn), 也有開(kāi)發(fā)平臺(tái)讓開(kāi)發(fā)中對(duì)接: 小米 IoT 開(kāi)發(fā)者平臺(tái))
一個(gè)展開(kāi)場(chǎng)景
聽(tīng) IoT 的講演后, 我有聯(lián)想到 Beacon 的使用場(chǎng)景, 早在 2013 年的 WWDC 會(huì)議上就有聽(tīng)到類(lèi)似的應(yīng)用場(chǎng)景, 蘋(píng)果推出了 iBeacon 的概念.
Beacon 技術(shù), 主要進(jìn)行室內(nèi)的精準(zhǔn)定位, 和室外基于基站, Wifi, GPS 的定位有所不同, Beacon 技術(shù)依賴(lài) Bluetooth 進(jìn)行室內(nèi)定位. 并依賴(lài)室內(nèi)的精準(zhǔn)定位, 在商城進(jìn)行更有想象空間的營(yíng)銷(xiāo).
自己未解決的疑問(wèn)
關(guān)于 IoT , 想象空間還是很大的, 但作為一個(gè)前端, 在可預(yù)見(jiàn)的未來(lái), 發(fā)展道路會(huì)越來(lái)越窄的情況下6, 如何找到突破口? 如何更好地去做切入? 我們能做些什么? 落地的場(chǎng)景有哪些? 所能帶來(lái)的價(jià)值? 以及比較重要的一點(diǎn), 如何和傳統(tǒng)搞物理和電子的同學(xué)競(jìng)爭(zhēng)? 物電的同學(xué), 有物理, 電路, 電子方面的知識(shí), 一般情況下, 使用 C, C++ 去編程? 我們前端能有什么不一樣的優(yōu)勢(shì), 怎么去尋求這其中的差異化發(fā)展呢?
個(gè)人成長(zhǎng)
@岑安老師 分享.
前端方向5個(gè)大方向
| 企業(yè)中后臺(tái) | 開(kāi)發(fā)者服務(wù) | 泛 NodeJS | 端技術(shù) | 圖形 |
|---|---|---|---|---|
| 組件通, 協(xié)議通<br />標(biāo)準(zhǔn)化: DSL 協(xié)議, 數(shù)據(jù)接口<br />智能化: 從設(shè)計(jì)到代碼 | 1: 從端到云一體化應(yīng)用解決方案<br />2: OS 系統(tǒng)深度鏈接, 閉環(huán)生態(tài)<br />3: ISV 的開(kāi)發(fā)和升級(jí) | 一條基本線+一個(gè)突破點(diǎn)<br />基本線: Node 應(yīng)用治理<br />突破口: IoT | Weex + Webview<br /><br />weex: 性能, IoT 能力, 國(guó)際化<br /> webview: 內(nèi)核, 渲染引擎, 新標(biāo)準(zhǔn) | 可視化 + 互動(dòng)能力<br /> 互動(dòng): 容器, 引擎, 框架, 平臺(tái)<br /> 可視化: 智能化, 數(shù)據(jù)聯(lián)動(dòng) |
接著上面我對(duì) IoT 的疑問(wèn), 會(huì)后跟 @岑安老師 聊了聊他認(rèn)為前端方向中泛 Nodejs 的突破口是 IoT的疑問(wèn), 簡(jiǎn)單寫(xiě)一下聽(tīng)完老師后的感想和自己的理解:
- 首先, 我們得跳出當(dāng)前前端的技術(shù)棧和業(yè)務(wù)的限制, 很顯然, 以目前前端的知識(shí)堆棧和能力, 沒(méi)有特別好的切入點(diǎn)來(lái)涉足 IoT 這個(gè)領(lǐng)域. 所以, 一個(gè)好的建議是, 做好該有的知識(shí)儲(chǔ)備, 以目前的狀態(tài)進(jìn)入 IoT, 注定是被淘汰的那一批.
- 其次, 目前沒(méi)有一個(gè)好的技術(shù)方案來(lái)讓前端參與進(jìn)來(lái), 甚至是像
天貓精靈的無(wú)屏設(shè)備, 前端的角色顯得更為尷尬, 所以, 簡(jiǎn)單說(shuō), 一篇空白, 等待自己去探索出一條前端之路. - 如果非要和物電的同學(xué)進(jìn)行正面競(jìng)爭(zhēng), 為什么不差異化發(fā)展, 做連接的工作呢? 既然端上被他們牢牢掌握著, 我們將他們作為基礎(chǔ)服務(wù), 將自己做為一個(gè)連接的角色, 整合端的能力? 做一個(gè)用戶的連接者? 有用戶的地方, 就應(yīng)該有前端哈?
- 單片機(jī)開(kāi)發(fā)搞不過(guò)或搞不來(lái), 我們能搞嵌入式系統(tǒng)嗎? 能用 Ruff 來(lái)做端嗎? 能用 Android 手機(jī)來(lái)做端嗎? 在做可行性方案的時(shí)候, 是不是有必要一定要搞單片機(jī)和低成本硬件呢? 我能不能在 Android 手機(jī)上做一些 IoT 開(kāi)發(fā), 在批量生產(chǎn)時(shí), 再讓物電的學(xué)生做電路設(shè)計(jì)和硬件成本的降低呢?
[站外圖片上傳中...(image-e9a0a1-1513824975958)]
個(gè)人成長(zhǎng)的3個(gè)關(guān)鍵詞
- 做: 有目標(biāo)地做, 分階段地做, 做到極致
- 思考: 思考是核心, WHY 有時(shí)候比 HOW 更重要
- 發(fā)聲: 執(zhí)行的總結(jié)和思考的傳達(dá)
自己對(duì)它的理解是, 做的時(shí)候, 更多需要去思考做背后的邏輯, 以及解決了什么問(wèn)題. 很多時(shí)候, 對(duì)技術(shù)選型或技術(shù)探索, 優(yōu)化之類(lèi)的, 需要和團(tuán)隊(duì)的目標(biāo) 或 老板的想法結(jié)合在一起.
發(fā)聲, 最近有聽(tīng)到很多類(lèi)似的, 比如, 工作需要透明, 需要更多地和團(tuán)隊(duì)成員分享, 還有包括技術(shù)分享等等. 說(shuō)的多不如做的多, 所以, 這三點(diǎn)就不展開(kāi).
[站外圖片上傳中...(image-192761-1513824975959)]
貓超不一樣的視角
@由校老師 貓超的 Web 實(shí)踐, 使用 U4 2.0 內(nèi)核的將 Android 4.4 及以上的兼容磨平, 并將 web 性能提升了不只一點(diǎn)點(diǎn). 因?yàn)橐矂偤糜龅搅擞型瑢W(xué)問(wèn) web 和 weex 技術(shù)選型的問(wèn)題, @由校老師 也做了很好的回答.
貓超在首次加載中, 對(duì) Service Worker 做了優(yōu)化, 通過(guò) UC 內(nèi)核, 可以將 Service Worker 本身 Push 到內(nèi)核中,并提前加載資源進(jìn)行首次優(yōu)化. 在二次加載中, 通過(guò) Service Worker 的 Cache 能力, 也能獲得不少的加速.
會(huì)后, 和 @由校老師 簡(jiǎn)單聊了一下性能痛點(diǎn): 長(zhǎng)列表的內(nèi)存回收, 或 cell 重用復(fù)用的問(wèn)題等等. 在他看來(lái)長(zhǎng) list 的性能問(wèn)題已經(jīng)不是特別大的問(wèn)題了, 相反, 他給我舉了一個(gè) tabbar 滾動(dòng)后無(wú)法保持狀態(tài)的痛點(diǎn).
[站外圖片上傳中...(image-a03e5b-1513824975959)]
其他小細(xì)節(jié)
- 好多程序員背景的 PPT 在配色和字體大小上, 用戶體驗(yàn)不是特別好, 比如: 藍(lán)底黑字, 大段字體很小的代碼, 這點(diǎn)在轉(zhuǎn)正預(yù)講的時(shí)候自己也犯過(guò)類(lèi)似的錯(cuò)誤, 所以, 體感也比較強(qiáng).
- 一個(gè)好的, 令人印象深刻的演講, 不是講一些共識(shí), 而是講些不一樣的觀點(diǎn). 即使是相同的觀點(diǎn), 也需要有不同的角度或維度, 去解讀自己的不同觀點(diǎn). 相同的觀點(diǎn)能包裝成不一樣的產(chǎn)品也不錯(cuò).
