資訊專欄INFORMATION COLUMN
摘要：純前端開發(fā)主要是針對(duì)靜態(tài)頁面。自主權(quán)最大，正常是使用進(jìn)行輔助開發(fā)，上線等。大致原因使用是為了和端的保持同步。四總結(jié)對(duì)于比較正式的項(xiàng)目，前端技術(shù)選型策略一定是產(chǎn)品收益最大化，用戶在首位。
對(duì)于前端團(tuán)隊(duì)，可以實(shí)現(xiàn)企業(yè)受益最大化要點(diǎn)。
一、技術(shù)選型的策略1、保證產(chǎn)品質(zhì)量
（1）功能穩(wěn)健：網(wǎng)頁不白屏，不錯(cuò)位，不卡死；操作正常；數(shù)據(jù)精準(zhǔn)。
（2）體驗(yàn)優(yōu)秀：加載體驗(yàn)，交互體驗(yàn)，視覺體驗(yàn)，無障礙訪問。
2、降低人力成本
（1）降低前期開發(fā)成本；
（2）降低后期維護(hù)成本。
二、前端開發(fā)模式選擇開發(fā)模式：1、純前端開發(fā)；2、前后端分離開發(fā)；3、后端主導(dǎo)的開發(fā)。
1、純前端開發(fā)
主要是針對(duì)靜態(tài)頁面。沒有模板和框架參與，基本上一個(gè)人就可以hold住，比如：官方網(wǎng)站，招聘站，以及設(shè)計(jì)感強(qiáng)烈且運(yùn)營活動(dòng)頁面等。自主權(quán)最大，正常是使用nodejs進(jìn)行輔助開發(fā)，上線等。
2、前后端分離開發(fā)
現(xiàn)在很多公司的系統(tǒng)都是采用前后端分離的開發(fā)模式。根據(jù)項(xiàng)目的性質(zhì)，使用nodejs進(jìn)行模板渲染（ejs模板，jade模板，dot模板，artTemplate模板），要不是框架自帶的渲染的方式（vue，react），但是實(shí)質(zhì)上一樣的，都是使用js對(duì)頁面進(jìn)行構(gòu)建?？刂茩?quán)很大。
3、后端主導(dǎo)開發(fā)
由于很多歷史遺留問題，有的產(chǎn)品還是采用后盾渲染的開發(fā)模式，比如一些內(nèi)部行政系統(tǒng)相關(guān)的。在和他們合作的時(shí)候，交付原型的時(shí)候，需要克制自己：
（1）不要使用sass，less產(chǎn)不多的前端預(yù)處理器；
（2）不使用類似于seajs之類的模塊化組件庫，而是采用效率更低的人工模塊耦合；
（3）不追求新技術(shù)，使用更基礎(chǔ)代碼，采用更傳統(tǒng)首發(fā)，良好的代碼設(shè)計(jì)保證質(zhì)量【參數(shù)接口暴露在外，后端可以輕松配置，而不是耦合在js中】。
這種前端屬于支援角色，后期維護(hù)通常都是與后端開發(fā)一起維護(hù)。這就是有時(shí)候會(huì)出現(xiàn)維護(hù)很痛苦的問題。
缺點(diǎn)：增加開發(fā)人力成本；
優(yōu)點(diǎn)：自我犧牲保證項(xiàng)目正常維護(hù)下去，職業(yè)的體現(xiàn)。
三、前端開發(fā)技術(shù)選型對(duì)于同一個(gè)類型的項(xiàng)目，采用開發(fā)模式，使用的基本框架都是一致的。
前端技術(shù)選型：
（1）外部用戶的PC站；
（2）外部用戶的mobile站；
（3）外部用戶的Native App開發(fā)；
（4）內(nèi)部員工的管理后臺(tái)
1、外部用戶的PC站需要有SEO，有加載體驗(yàn)，采用的是前后端分離開發(fā)模式，頁面直接渲染，基于jquery。
為什么使用jquery？
（1）主要是為了兼容IE8；
（2）是外部用戶，視覺體驗(yàn)高，權(quán)重高。適合先有行，再有行。就是說視覺和行為要盡可能分離，會(huì)犧牲一點(diǎn)開發(fā)成本，但是用戶更重要。
（3）絕大多數(shù)頁面交互輕量用不上數(shù)據(jù)驅(qū)動(dòng)。
2、外部用戶的Mobile站這里說的Mobile站主要是瀏覽器訪問為主的，因此，頁面切換都是傳統(tǒng)連接跳轉(zhuǎn)，屬于傳統(tǒng)web應(yīng)用，前后端分離開發(fā)模式，頁面直接渲染，采用react。大致原因：使用react 是為了 和APP端的react native保持同步。
3、外部用戶的Native App開發(fā)前端組有直接參與 Native APP 開發(fā)的項(xiàng)目，使用的是 React Native 進(jìn)行開發(fā)。
為啥選擇RN，之前Hybrid模式開發(fā)有性能優(yōu)化瓶頸，采用React Native性能可以突破這個(gè)瓶頸，有原生的性能，且支持熱更新，上手不算太難，跨平臺(tái)，IOS和android代碼復(fù)用率90%。適合交互和動(dòng)畫不太復(fù)雜的項(xiàng)目，最終要根據(jù)項(xiàng)目來。特別適合快速迭代的項(xiàng)目或者前期需要大量試錯(cuò)的項(xiàng)目。
（1）不要隨意使用第三方庫，后期修改維護(hù)不方便，盡量自己寫還是自己寫；
（2）前期還是需要客戶端幫忙配合，項(xiàng)目搭建。
4、內(nèi)部員工的管理后臺(tái)前后端分離開發(fā)，頁面?zhèn)戎禺惒戒秩?，使用vuejs。
大致內(nèi)容是：后臺(tái)管理系統(tǒng)有大量的增刪改查操作，適合具有雙向綁定的類庫或者框架進(jìn)行渲染。同時(shí)沒有兼容性的要求（SEO，首屏渲染），因此單頁面是合適的?？梢赃x擇vue，react，angular。因?yàn)関ue對(duì)api，文檔對(duì)開發(fā)者更友好。選用好的UI組件，規(guī)范貫徹，拆分和按需加載，自動(dòng)化測試有待加強(qiáng)。
四、總結(jié)對(duì)于比較正式的項(xiàng)目，前端技術(shù)選型策略一定是產(chǎn)品收益最大化，用戶在首位?？紤]到億級(jí)的用戶量，自然技術(shù)選型更為謹(jǐn)慎，于是優(yōu)先選成熟，經(jīng)典的解決方案。
但是不是說，排斥熱門技術(shù)。相反，就算還是很不成熟的新技術(shù)，只要對(duì)產(chǎn)品帶來收益的，一定要鼓勵(lì)應(yīng)用的，比如AMP和PWA的實(shí)踐。
其實(shí)這時(shí)候也會(huì)帶來一個(gè)問題，技術(shù)人員對(duì)新技術(shù)有著天然的學(xué)習(xí)和實(shí)踐需求，因?yàn)檫@有助于降低內(nèi)心的焦慮和不安全感。
尤其是對(duì)技術(shù)有著狂熱的愛好的小伙伴，這些成熟項(xiàng)目由于規(guī)范約束，不能隨便亂來，很容易讓開發(fā)人員報(bào)國無門的感覺，這該如何達(dá)到心理的平衡？
通過邊緣項(xiàng)目，實(shí)踐性的項(xiàng)目，以及團(tuán)隊(duì)會(huì)自發(fā)發(fā)起一些有價(jià)值的內(nèi)部項(xiàng)目來滿足這樣的需求，同時(shí)積累寶貴的經(jīng)驗(yàn)。相當(dāng)于嵌入了新的平臺(tái)，讓產(chǎn)品，團(tuán)隊(duì)和個(gè)人都達(dá)到非常好的平衡。
產(chǎn)品驅(qū)動(dòng)的文化下，心中想的更多是把用戶和產(chǎn)品做更好，讓技術(shù)服務(wù)產(chǎn)品，因產(chǎn)品而技術(shù)，而非因技術(shù)而技術(shù)。
運(yùn)營驅(qū)動(dòng)的文化下，本質(zhì)上是吆喝做買賣，成為前言技術(shù)的弄潮兒就是和企業(yè)文化的契合。
【注：我是saucxs，也叫songEagle，松寶寫代碼，文章首發(fā)于sau交流學(xué)習(xí)社區(qū)https://www.mwcxs.top），關(guān)注我們每天閱讀更多精彩內(nèi)容】
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104866.html
摘要：而利用進(jìn)一步提高了序列化速度，降低了數(shù)據(jù)包大小。帶來的最大好處是精簡請(qǐng)求響應(yīng)內(nèi)容，不會(huì)出現(xiàn)冗余字段，前端可以決定后端返回什么數(shù)據(jù)。再次強(qiáng)調(diào)，相比和，是由前端決定返回結(jié)果的反模式。請(qǐng)求者可以自定義返回格式，某些程度上可以減少前后端聯(lián)調(diào)成本。 1 引言 每當(dāng)項(xiàng)目進(jìn)入聯(lián)調(diào)階段，或者提前約定接口時(shí)，前后端就會(huì)聚在一起熱火朝天的討論起來?？赡?99% 的場景都在約定 Http 接口，討論 URL...
摘要：三性能優(yōu)化處理做工具類的項(xiàng)目，性能是非常大的挑戰(zhàn)，我總結(jié)了以下幾個(gè)常見的性能優(yōu)化點(diǎn)數(shù)據(jù)緩存。防抖，節(jié)流，事件委托內(nèi)存釋放。 內(nèi)容大綱： 1、功能介紹 2、技術(shù)架構(gòu) 3、性能優(yōu)化 4、細(xì)節(jié)分享 5、開源說明 一、項(xiàng)目功能介紹 很久沒寫過技術(shù)類的文章了，這次給大家分享一個(gè)近期的項(xiàng)目，采用react+mobx+jquery構(gòu)建的大型工具類項(xiàng)目。查看項(xiàng)目網(wǎng)址。 如果用過易企秀，maka或者...
摘要：三性能優(yōu)化處理做工具類的項(xiàng)目，性能是非常大的挑戰(zhàn)，我總結(jié)了以下幾個(gè)常見的性能優(yōu)化點(diǎn)數(shù)據(jù)緩存。防抖，節(jié)流，事件委托內(nèi)存釋放。 內(nèi)容大綱： 1、功能介紹 2、技術(shù)架構(gòu) 3、性能優(yōu)化 4、細(xì)節(jié)分享 5、開源說明 一、項(xiàng)目功能介紹 很久沒寫過技術(shù)類的文章了，這次給大家分享一個(gè)近期的項(xiàng)目，采用react+mobx+jquery構(gòu)建的大型工具類項(xiàng)目。查看項(xiàng)目網(wǎng)址。 如果用過易企秀，maka或者...
摘要：作者兩年經(jīng)驗(yàn)第一家任職的是個(gè)小公司第二家算是二線互聯(lián)網(wǎng)公司各待了一年吧能有機(jī)會(huì)去阿里面試很驚喜先來和大家分享一下面試經(jīng)歷電話面試初探因?yàn)檫€在職的緣故電話面試從晚上點(diǎn)鐘開始持續(xù)了半個(gè)小時(shí)左右一開始的時(shí)候特比緊張甚至聲音略有些顫抖簡單自我介紹做 作者兩年經(jīng)驗(yàn), 第一家任職的是個(gè)小公司, 第二家算是二線互聯(lián)網(wǎng)公司, 各待了一年吧... 能有機(jī)會(huì)去阿里面試很驚喜! 先來和大家分享一下面試經(jīng)歷....
閱讀 1253·2021-11-22 13:54
閱讀 1440·2021-11-22 09:34
閱讀 2717·2021-11-22 09:34
閱讀 4030·2021-10-13 09:39
閱讀 3352·2019-08-26 11:52
閱讀 3373·2019-08-26 11:50
閱讀 1540·2019-08-26 10:56
閱讀 1923·2019-08-26 10:44
