成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

新歡 React 在 Coding 2.0 中的前端嘗試

suosuopuo / 1018人閱讀

摘要：一直是我掛在嘴邊的話題。今年月也曾展望過(guò)，那時(shí)候是考慮用高版本的來(lái)重構(gòu)，然后逐步遷移到上面去，然而最大的問(wèn)題還是沒(méi)人，沒(méi)時(shí)間的問(wèn)題。關(guān)于作者彭博前端工程師新的體驗(yàn)總是好的原文鏈接

Coding 2.0 一直是我掛在嘴邊的話題。

老板說(shuō)了，等我們“有錢(qián)，有人，有時(shí)間”了就有機(jī)會(huì)弄了。

但是我從他第一次說(shuō)就沒(méi)當(dāng)真，這種 “有錢(qián)，有人，有時(shí)間” 的情況，在創(chuàng)業(yè)公司里應(yīng)該是不太可能出現(xiàn)的。

今年 2月 也曾 “展望” 過(guò) Coding 2.0，那時(shí)候是考慮用高版本的 AngularJS 來(lái)重構(gòu)，然后逐步遷移到上面去，然而最大的問(wèn)題還是“沒(méi)人，沒(méi)時(shí)間”的問(wèn)題。

這種狀況讓我也無(wú)能為力，每每想到這些，挫敗感很深，然后，習(xí)慣了以后，也還是能活得下去…

然后順著 WebIDE 吹來(lái)的 React 風(fēng)潮，我也順便開(kāi)始玩了玩，也有空沒(méi)空跟 劉輝 交流交流，于是就有機(jī)會(huì)寫(xiě)了些下面的這些組件：

Modal

每次用 Angular 實(shí)現(xiàn)的 modal 的時(shí)候，用過(guò)的人應(yīng)該都會(huì)發(fā)自內(nèi)心的吐槽（旁白：怪我咯，都怪我咯…）

然而，寫(xiě)了一晚上 React 的 modal 組件，總算是能夠這么簡(jiǎn)單的使用了，show 設(shè)置為 true 顯示，關(guān)閉調(diào)用 onClose 方法：

?


?

Layout

說(shuō)到布局，也是心傷，我們的應(yīng)用是一個(gè) SPA（Single Page Application）,可還大量保留了傳統(tǒng)網(wǎng)頁(yè)的滾動(dòng)條，體驗(yàn)上就差很多，比如：


上圖滾動(dòng)條只應(yīng)該出現(xiàn)在成員那一列，還有公開(kāi)項(xiàng)目底部滾動(dòng)條:


而我認(rèn)為的一個(gè)好用的布局器應(yīng)該是這樣的，它能讓你在想要有滾動(dòng)條的時(shí)候有滾動(dòng)條，想要定寬就定寬：

于是又 寫(xiě)了一晚上的 Flex 布局器，終于可以輕松的干掉惱人的全屏網(wǎng)頁(yè)滾動(dòng)條了

?

?

咳咳，請(qǐng)男同學(xué)們注意標(biāo)紅的地方哈。

Loading

寫(xiě)了一堆列表以后，每次寫(xiě) Loading 都很煩，要維護(hù)一堆 loading 狀態(tài)，然后寫(xiě)了下面的列表組件，媽媽再也不用擔(dān)心我寫(xiě)出各種各樣的列表 Loading 樣式了…


列表自帶 Loading 狀態(tài)：

總結(jié)下上面所說(shuō)的，上面的那些組件都是在被坑過(guò)無(wú)數(shù)次，才總結(jié)出的經(jīng)驗(yàn)教訓(xùn)，才知道我們真正在開(kāi)發(fā)中需要什么，所以 Coding 2.0 用什么框架實(shí)現(xiàn)并不是重點(diǎn)，重點(diǎn)是它一定是：開(kāi)發(fā)體驗(yàn)舒適，能讓開(kāi)發(fā)者更多的關(guān)注業(yè)務(wù)細(xì)節(jié)和用戶體驗(yàn)而不是框架本身的一些亂七八糟的問(wèn)題；性能卓越的；維護(hù)性佳的；可測(cè)試的；可重用的

Coding 2.0 in Coding+

Coding 2.0 的念頭總會(huì)隔一段時(shí)間就冒出來(lái)一下，而這次，我又找到了一個(gè)相對(duì)“輕松”一點(diǎn)的推進(jìn)想法的方式：我不要多少人、也不需要占用多少工作時(shí)間，也沒(méi)人為它買(mǎi)單付賬 —— 利用 Coding+ 發(fā)布我覺(jué)得需要重構(gòu)或者重寫(xiě)的功能，在性能和體驗(yàn)上做一些嘗試

Coding+ 公司大部分人應(yīng)該有聽(tīng)說(shuō)過(guò)，是用來(lái)增強(qiáng) Coding 的功能的，是個(gè) Chrome 插件，在 Chrome 官方市場(chǎng)上搜索 “Coding+” 就能下載到

而 Chrome 插件有兩個(gè)好處：

能夠輕松的 跨域訪問(wèn) – 我可以不用做任何代理就能像 Coding 服務(wù)器請(qǐng)求數(shù)據(jù)
隨時(shí)體驗(yàn)新功能 – 我可以隨時(shí)發(fā)布最新的版本讓所有用戶體驗(yàn)

??

開(kāi)發(fā)這些組件確實(shí)很費(fèi)時(shí)間，但是 React 給我的開(kāi)發(fā)體驗(yàn)是非凡的，它概念極其簡(jiǎn)單，上手很快，而且進(jìn)階也很舒適，所有組件的實(shí)現(xiàn)都沒(méi)讓我有挫敗感

我希望，有一天這個(gè)項(xiàng)目能夠獲得整個(gè)公司的認(rèn)同，并真正投入“人、時(shí)間、錢(qián)”到 Coding 2.0 項(xiàng)目上，我覺(jué)得 Gmail —> Inbox 就是一個(gè)很好的范例。

  
關(guān)于作者


  彭博 @ Coding.net

  前端工程師

  新的體驗(yàn)總是好的！

原文鏈接：https://blog.coding.net/blog/coding2-feasibility-trial

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85828.html

相關(guān)文章

  • 2017-09-27 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選是如何工作的內(nèi)存管理如何處理個(gè)常見(jiàn)的內(nèi)存泄漏譯中的面向?qū)ο笤驮玩溊^承源碼事件機(jī)制考拉升級(jí)經(jīng)驗(yàn)掘金中文第期你知道編譯與解釋的區(qū)別嗎視頻在白鷺引擎中的實(shí)踐王澤變量自定義屬性使用指南眾成翻譯禁止手機(jī)虛擬鍵盤(pán)彈出做 2017-09-27 前端日?qǐng)?bào) 精選 JavaScript是如何工作的：內(nèi)存管理 + 如何處理4個(gè)常見(jiàn)的內(nèi)存泄漏(譯) js中的面向?qū)ο?、原型、原型鏈、繼承Vue....

    wangym 評(píng)論0 收藏0

  • Vue.js快速入門(mén)

    摘要：今年以來(lái)，的文檔更新很快完善社區(qū)也日漸狀大，再加上于某廠你懂的大力的推廣，的前景十分光明。一般情況下，中小型的系統(tǒng)從遷移到版本大概只需要天的時(shí)間?？烊?dòng)手嘗試吧原創(chuàng)新書(shū)移動(dòng)前端高效開(kāi)發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開(kāi)售。 作者：曉飛（滬江Web前端開(kāi)發(fā)工程師）本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者及出處 Vue.js框架已經(jīng)火了好長(zhǎng)一段時(shí)間了，早在2015年的雙11中，淘寶的部分導(dǎo)購(gòu)業(yè)務(wù)——如：雙十一晚會(huì)搖...

    KitorinZero 評(píng)論0 收藏0

  • Reactjs vs. Vuejs

    摘要：上圖是二月份前端框架排名，位居第一，排名第三。我們認(rèn)為前端模板和組件代碼是緊密相連的。直到最近看了文檔，才發(fā)現(xiàn)另有蹊蹺。 歡迎大家關(guān)注騰訊云技術(shù)社區(qū)-segmentfault官方主頁(yè)，我們將持續(xù)在博客園為大家推薦技術(shù)精品文章哦~ 紀(jì)俊，從事Web前端開(kāi)發(fā)工作，2016年加入騰訊OMG廣告平臺(tái)產(chǎn)品部，喜歡研究前端技術(shù)框架。 這里要討論的話題，不是前端框架哪家強(qiáng)，因?yàn)樵?Vue 官網(wǎng)就已經(jīng)...

    AaronYuan 評(píng)論0 收藏0

  • 前端每周清單第 40 期: JS 的 Core 與 Cost，Node 內(nèi)存溢出調(diào)試，Softwar

    摘要：已被所有主流瀏覽器支持在過(guò)去幾周蘋(píng)果的瀏覽器與微軟的瀏覽器分別發(fā)布新版本，支持了，再加上早已支持的和，已得到所有主流瀏覽器支持。 showImg(https://segmentfault.com/img/remote/1460000012086220?w=1240&h=823); 前端每周清單第 40 期: JS 的 Core 與 Cost，Node 內(nèi)存溢出調(diào)試，Software 2...

    番茄西紅柿 評(píng)論0 收藏0

  • 前端窩 - 收藏集 - 掘金

    摘要：毫無(wú)疑問(wèn)，設(shè)計(jì)模式于己于他人于系統(tǒng)都是多贏的設(shè)計(jì)模式使代碼編寫(xiě)真正工程化設(shè)計(jì)模小書(shū)前端掘金這是一本關(guān)于的小書(shū)。 JavaScript 常見(jiàn)設(shè)計(jì)模式解析 - 掘金設(shè)計(jì)模式（Design pattern）是一套被反復(fù)使用、多數(shù)人知曉的、經(jīng)過(guò)分類編目的、代碼設(shè)計(jì)經(jīng)驗(yàn)的總結(jié)。使用設(shè)計(jì)模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性。毫無(wú)疑問(wèn)，設(shè)計(jì)模式于己于他人于系統(tǒng)都是多贏的；設(shè)計(jì)...

    李文鵬 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<