前端工做流中，如何更好的與上下游溝通

本文是面向團隊內部的小分享，對象是前端上下游中非技術或者非技術出身的合做夥伴（產品/設計/測試）。公司採用的是native + h5的Hybird開發模式。

1. 這個功能能不能實現？

能。若是你在其餘同類APP中或者移動端瀏覽器上看到某個炫酷/貼心/驚豔/好玩/好想抄的功能，別問能不能實現，別人能作到的咱們就必定能。大多數依賴現有的技術棧能夠實現，可是因爲技術棧不一樣/技術能力的差別/兼容性要求差別，會致使時間成本太高/體驗不夠好等問題。因此當你看到一個好想抄的功能時，先預估下你能接受的成本，而後你能夠這麼問：這個功能花三天的時間能不能保證80%的用戶能夠用？固然，前提是這個問題歸前端管。

2. 這個問題歸誰管？

因爲開發模式的緣由，在求證一個技術的可行性或者定位Bug的時候，可能會糾結到底找誰：前端？後端？App？先就常見問題簡單粗暴分個類吧：

• 樣式/佈局/特效/動畫/交互：前端，大多數是前端的活/鍋，可是若是涉及到頂部nav和底部tab的話，去問問App唄
• 數據調整/數據有錯：後端，固然，也多是前端手抖拿到數據後放錯位置了/算錯了/寫錯了，不太相信前端的話先找前端查下接口拿到的數據也無可厚非，前端和產品/測試都是好朋友
• 邏輯錯誤：不涉及數據的找前端，涉及數據的找完前端找後端也或者先找後端再找前端，看你心情
• 頁面掛了：找後端/App/運維，若是是外站的頁面就先去找App，雖然可能最後會扔回到前端

3. 遇到棘手Bug怎麼辦？

重現，重現，重現。先重現，再分析。重現不了？return;

• 若是是內測/外測/灰度發現bug不要急，參考上面第二條，該找誰找誰

• 若是是生產環境：

  • 廣泛性bug：不論是影響用戶體驗類的，仍是數據錯誤類的，也或者邏輯錯誤類的，只要是廣泛性bug，首先都須要考慮代碼回退，再分析解決
  • 頁面掛了：若是是剛發生產，驗收時發現，立馬回退需求代碼，在外測/灰度嘗試重現，而後該找誰找誰，解決後再上；若是需求發了好幾天才發現，收拾收拾準備找下家，咱們隨後就來
  • 個別機型有問題：重現，重現不了給截圖+描述，描述中必定要包含機型/系統版本/App版本，而後咱們再嘗試重現，重現不出來的話只能盲改，盲改基本用處不大

4. 頁面能不能優化一下？

我能優化，你能幫我申請到排期嗎

• 頁面慢

  • 換個100M寬帶/5G/4G再看看
  • 若是白屏時間較長，可是從看到進度條到頁面出來東西的速度還能夠，找APP/後端
  • 若是從進度條到頁面出來時間較長或者頁面出來到徹底展現出來時間較長，重要頁面，給前端排期，基本都能優化一些
• 交互反人類/頁面醜的無法看：約會，找產品/後端，確認新的交互，出交互稿出圖，排期。一年換一版都算比較頻繁了
• 體驗不是很好：分狀況，好比這裏手機號碼輸入能不能3-4-4？能；好比這裏的鍵盤下去後Toast能不能不閃一下，不能；具體直接找前端確認就好

5. 更多細節問題

• 字體：正常狀況下，設計圖請不要出現特殊字體，都會被替換成默認字體。目前的技術方案不會支持特殊字體（除非直接切成圖放上去），不遠的未來會支持我的重要頁面，我的特殊字體

• 圖片：除非必要，常規前端開發過程當中比較排斥圖片的。固然像一些活動什麼的，週期短，又須要氣氛的，大張圖大張圖往頁面上貼沒問題的。常規靜態頁面中，可使用css完成的樣式效果就必定不會用圖片，好比一些背景圖、icon。前端css3支持的樣式效果包括不限於

  • 樣式：線性漸變、徑向漸變、圓角（26個英文字母包含的簡單圖案都可實現，參見http://www.webhek.com/post/cs...）、透明、陰影、濾鏡（灰度/褐色/飽和度/色相旋轉/反色/透明度/亮度/模糊/對比度/陰影，參見https://www.w3cschool.cn/cssr...）等
  • 動畫：簡單的移動（3D）、縮放（3D）、拉伸（3D）、旋轉（3D）以及上一條中全部css樣式的漸變過程，好比忽然寬了，慢慢圓了，不知怎地就綠了，好比小球落地彈起的duangduang的物理過程仿真
  • 其餘：canvas/svg/webgl等，能夠實現大型網頁遊戲，虛擬現實等。遺憾的是我就會點簡單的canvas和svg
• 兼容性：PC：ie8以上不亂，如下能用便可。 H5：iphone6及以上保證還原度，如下及安卓無明顯樣式錯亂

其餘的，想到再說吧