大約在三個(gè)月前,也寫(xiě)過(guò)一篇[這樣的文章](http://www.cnblogs.com/strick/p/3946475.html),最近也在忙一個(gè)項(xiàng)目,最近幾天有時(shí)間,所以就來(lái)這里發(fā)發(fā)牢騷。
  這次要開(kāi)發(fā)兩個(gè)產(chǎn)品,為期兩個(gè)月,包括兩個(gè)APP和三個(gè)后臺(tái)。與上次開(kāi)發(fā)的項(xiàng)目相比,規(guī)模要大很多,功能點(diǎn)也要多一些,難度也要大一些。
  我負(fù)責(zé)的是整個(gè)后臺(tái)的前端、部分后臺(tái)邏輯、部分API接口邏輯與數(shù)據(jù)抓取分析。
## 一、霧中前進(jìn)
  這是我在這個(gè)迭代期中最直觀的感覺(jué),看不到前進(jìn)的方向,也看不到離終點(diǎn)還有多遠(yuǎn),有一種走一步算一步的趕腳。
  每天都在忙碌,趕進(jìn)度,但別人問(wèn)你還剩下多少或者問(wèn)你大約做了多少的時(shí)候,我卻答不上來(lái)。
  為什么會(huì)這樣?因?yàn)槲覀冊(cè)陂_(kāi)發(fā)的開(kāi)始階段沒(méi)有做項(xiàng)目進(jìn)度計(jì)劃,也沒(méi)有做項(xiàng)目的時(shí)間評(píng)估。急哄哄的上來(lái)就開(kāi)干,這是我們給自己挖的第一個(gè)坑。由于沒(méi)做這個(gè)計(jì)劃,自然而然的也就低估了這個(gè)項(xiàng)目的難度,樂(lè)觀的以為憑借團(tuán)隊(duì)里成員們豐富的開(kāi)發(fā)經(jīng)驗(yàn),可以很順利的完成交付。后面吃進(jìn)了苦頭,經(jīng)常的加班、返工、修改,陷入了一個(gè)惡性循環(huán)。
:-: 
## 二、原型的理解
**1)倉(cāng)促的設(shè)計(jì)**
  我們這邊產(chǎn)品部門(mén)是在原型基本定稿之后,我們才開(kāi)始開(kāi)發(fā)的,所以需求的變更倒不是很多。不過(guò)產(chǎn)品部門(mén)的原型設(shè)計(jì)是在倉(cāng)促出趕出來(lái)的,所以有很多地方寫(xiě)的很模糊,很容易產(chǎn)生歧義。
**2)準(zhǔn)備不足**
  在項(xiàng)目的開(kāi)始階段,沒(méi)認(rèn)真的看原型,沒(méi)仔細(xì)的分析,后面出那么多問(wèn)題,只能說(shuō)自己當(dāng)初太任性,怪不得產(chǎn)品太復(fù)雜。后面在開(kāi)發(fā)的時(shí)候,遇到模糊的地方就與產(chǎn)品面對(duì)面的討論,反反復(fù)復(fù)許多次,其實(shí)完全可以在項(xiàng)目伊始,就該注意到這些歧義點(diǎn)。
**3)原型大而全**
  產(chǎn)品的原型做的是大而全,就是想一下子吃成胖子,他們可不幫你考慮實(shí)現(xiàn)難度這些問(wèn)題。我們沒(méi)做上面的分析,沒(méi)有與產(chǎn)品討價(jià)還價(jià),等于默認(rèn)照單全做,這是我們給自己埋的第二個(gè)坑。在接下來(lái)的日子里,光實(shí)現(xiàn)功能就花了我們很多的精力與時(shí)間,做出的產(chǎn)品質(zhì)量可想而知,肯定是漏洞百出。
**4)產(chǎn)品瘦身**
  最后在產(chǎn)品發(fā)布前不得不瘦身,將能有的功能先上,倉(cāng)促的發(fā)布,非常影響大家的心情,辛辛苦苦做出的東西卻被硬生生的砍掉。當(dāng)初就該與產(chǎn)品據(jù)理力爭(zhēng)一下,先將核心業(yè)務(wù)實(shí)現(xiàn)出來(lái),然后再?lài)@這些核心開(kāi)發(fā)出周邊的一些可有可無(wú)的功能。讓我們有充足的時(shí)間寫(xiě)出健壯代碼,減少返工,少走彎路,穩(wěn)穩(wěn)上線(xiàn),大家開(kāi)開(kāi)心心和和氣氣的,何樂(lè)而不為呢。唉....?YY一下啦。
  下圖是我聽(tīng)到瘦身時(shí)候的感受:
:-: 
## 三、團(tuán)隊(duì)的建設(shè)
**1)全新組建**
  我們的團(tuán)隊(duì)是重新組建的,成員都是在項(xiàng)目中陸續(xù)加入的,十一月初的時(shí)候服務(wù)器組有4個(gè)人,IOS和Android各1人,設(shè)計(jì)1人。這是剛開(kāi)始的配置,項(xiàng)目在開(kāi)始45天后,服務(wù)器組10人,IOS有6人,Android有5人,設(shè)計(jì)有4人,團(tuán)隊(duì)發(fā)展迅速非常快。
**2)磨合期**
  大家都是初次合作,就需要一段磨合期,不過(guò)項(xiàng)目非常趕,剛進(jìn)來(lái)的人,基本都是給他們介紹一下后,就馬上開(kāi)始,這導(dǎo)致很多潛在問(wèn)題。例如大家都是各自開(kāi)發(fā),很多功能其實(shí)可以抽象在一起,但每個(gè)人都寫(xiě)了一套,也沒(méi)時(shí)間做code?review,只能發(fā)現(xiàn)一個(gè)問(wèn)題改一個(gè),類(lèi)似的地方還得復(fù)查一遍,以防出現(xiàn)同樣的問(wèn)題。再比如,一開(kāi)始也沒(méi)怎么訂代碼規(guī)范,有的成員沒(méi)在方法的注釋中寫(xiě)author,等這個(gè)函數(shù)出了問(wèn)題,都不知道該找誰(shuí)。
**3)對(duì)產(chǎn)品的理解不同**
  成員都是后面陸續(xù)進(jìn)來(lái)的,對(duì)產(chǎn)品的理解一開(kāi)始都是模糊的,直接就開(kāi)發(fā),難免會(huì)走岔,返工是經(jīng)常的事兒,邊開(kāi)發(fā)邊理解產(chǎn)品就是我們目前的方式了。
**4)初次配合**
  服務(wù)器與客戶(hù)端之間的配合也是第一次,剛開(kāi)始由于接口文檔沒(méi)有寫(xiě)具體,導(dǎo)致兩邊之間出現(xiàn)了些溝通問(wèn)題,很耗時(shí)間,剛開(kāi)始是舉步艱難。古語(yǔ)說(shuō)的萬(wàn)事開(kāi)頭難,真的很有道理。后面經(jīng)過(guò)各種措施,情況得到好轉(zhuǎn),成員之間的默契也越來(lái)越好。
**5)代碼從0開(kāi)始**
  剛開(kāi)始的時(shí)候,啥也沒(méi)有,大部分的工具類(lèi)代碼都沒(méi)有,都是重新寫(xiě)的,這個(gè)也是挺耗時(shí)間與精力的。前端的JS腳本和CSS都是重新設(shè)計(jì)編寫(xiě),寫(xiě)的代碼肯定也不會(huì)很健壯。項(xiàng)目開(kāi)始的時(shí)候服務(wù)器端只有4個(gè)人,我們是先編寫(xiě)后臺(tái),所以還得再分出一個(gè)人去做前端,人員就更加緊張了。
:-: 
## 四、與產(chǎn)品的溝通
**1)認(rèn)識(shí)層面不一樣**
  一個(gè)大問(wèn)題,開(kāi)發(fā)人員與產(chǎn)品設(shè)計(jì)的理解總是不在一個(gè)頻道上面。例如原型上面的一個(gè)功能,我們按照對(duì)原型的理解開(kāi)發(fā)好了,給產(chǎn)品的看要么不是這樣做,要么又漏掉了一些細(xì)節(jié)。有時(shí)候在與產(chǎn)品的人討論過(guò)后,我們?cè)陂_(kāi)發(fā)后也會(huì)出現(xiàn)類(lèi)似的問(wèn)題。后面就采取措施,每次討論就要產(chǎn)品把要修改的地方發(fā)郵件出來(lái),有根有據(jù)的,出了問(wèn)題也能找到在哪塊做岔了。
**2)情緒作怪**
  情緒也是個(gè)大問(wèn)題,功能多,時(shí)間緊,經(jīng)常返工,這無(wú)形中就給了我們很多壓力。有時(shí)候在與產(chǎn)品部討論功能的時(shí)候,他們讓我改這改那,心中會(huì)有種潛在的排斥心理,就是不想配合你,有時(shí)甚至?xí)悬c(diǎn)怒火,果然還是年輕氣盛。經(jīng)常會(huì)聽(tīng)到站在對(duì)方角度看問(wèn)題,就能理解對(duì)方,說(shuō)起來(lái)容易,做起來(lái)好難。
**3)站的角度不同**
  產(chǎn)品設(shè)計(jì)人員不懂開(kāi)發(fā),經(jīng)常是要實(shí)現(xiàn)一個(gè)功能,但對(duì)我們開(kāi)發(fā)來(lái)說(shuō)卻不會(huì)那么簡(jiǎn)單。原型上面就有很多這種耗時(shí)間的功能,托我們開(kāi)發(fā)的進(jìn)度,在我看來(lái)完全可以在迭代的第二期完成,把核心功能做做扎實(shí),把大流程跑通,大家都方便。產(chǎn)品設(shè)計(jì)的人是完美主義,我們程序開(kāi)發(fā)是現(xiàn)實(shí)主義。
**4)沒(méi)做短期交付**
  我感覺(jué)應(yīng)該每個(gè)禮拜都給產(chǎn)品看個(gè)demo展示,如果有業(yè)務(wù)錯(cuò)誤就能馬上糾正,不用等到后面再花大力氣修復(fù)。也能讓產(chǎn)品的人知道項(xiàng)目進(jìn)行到什么程度了,讓他們心里有底,讓他們能早點(diǎn)做補(bǔ)救措施的決定,別到了后面幾天才想到搶救。不過(guò)做起來(lái)還是挺麻煩的,給他們看代碼肯定不行的,他們要看的是能操縱的東西,要有血有肉,開(kāi)始的階段沒(méi)數(shù)據(jù)沒(méi)頁(yè)面,流程也跑不起來(lái)。得想辦法給他們一個(gè)能看的懂的東西。
  開(kāi)發(fā)的過(guò)程中,我經(jīng)常會(huì)向下圖那樣凌亂:
:-: 
## 五、抓數(shù)據(jù)
  為了豐滿(mǎn)頁(yè)面,需要大量的外部數(shù)據(jù),只有通過(guò)抓取其他網(wǎng)站的數(shù)據(jù)才能獲得。抓數(shù)據(jù)這塊有很多坑,踩了好多個(gè)。剛開(kāi)始是自己抓,我在上一篇[《用PHP抓取頁(yè)面并分析》](http://www.cnblogs.com/strick/p/4055283.html)寫(xiě)了點(diǎn)分享。后面時(shí)間不夠,公司就花錢(qián)讓外面的人抓了,本以為會(huì)輕松很多,沒(méi)想到還是有很多坑。
**1)反復(fù)抓取**
  剛開(kāi)始產(chǎn)品的說(shuō)要以XXX網(wǎng)的數(shù)據(jù)為準(zhǔn),我們就按照指令去那邊抓。后面又說(shuō)以YYY網(wǎng)的為準(zhǔn),那我們就重新把那個(gè)網(wǎng)站的數(shù)據(jù)抓下來(lái)。最后告訴我們說(shuō),要以他們自己的一套數(shù)據(jù)為標(biāo)準(zhǔn),將抓來(lái)的數(shù)據(jù)和那套數(shù)據(jù)做個(gè)映射關(guān)系。一下子感覺(jué)好坑,但是沒(méi)有讓產(chǎn)品寫(xiě)抓取數(shù)據(jù)的規(guī)范說(shuō)明,只能自己認(rèn)栽啦。這樣幾個(gè)來(lái)回讓我們非常厭惡抓數(shù)據(jù)了。
**2)分析數(shù)據(jù)**
  后面讓第三方來(lái)抓,為了圖簡(jiǎn)單,我們把給抓數(shù)據(jù)的人定了數(shù)據(jù)庫(kù)表,想到時(shí)候就直接倒進(jìn)來(lái)。后面在分析數(shù)據(jù)的時(shí)候,缺了很多字段,這些信息都抓取不到,有些數(shù)據(jù)還是錯(cuò)誤的。這些毛胚數(shù)據(jù)完全不能用,只能再寫(xiě)腳本糾正,有些需要人工校對(duì),先把數(shù)據(jù)導(dǎo)出成execl,讓產(chǎn)品的人整理,再把整理后的execl給我們開(kāi)發(fā),我們?cè)倬帉?xiě)不同的腳本導(dǎo)入到數(shù)據(jù)庫(kù)中。反反復(fù)復(fù)好多次,腳本也寫(xiě)了一個(gè)又一個(gè),為這個(gè)操碎了心。
**3)條理不清晰**
  在還沒(méi)有跑通正常流程前,就匆匆忙忙的把抓來(lái)的數(shù)據(jù)放到數(shù)據(jù)庫(kù)中,直接導(dǎo)致客戶(hù)端各種問(wèn)題,不是圖片顯示不了就是信息沒(méi)有或者就是直接報(bào)錯(cuò)??蛻?hù)端的APP遲遲不能給產(chǎn)品看,就是因?yàn)閿?shù)據(jù)太渣根本沒(méi)法用。后面將這些數(shù)據(jù)清掉,走正常流程,從我們的后臺(tái)錄入,錄入一些完整的數(shù)據(jù),在客戶(hù)端顯示,效果非常明顯,客戶(hù)端的流程順暢的跑起來(lái)了。
:-: 
  想做好一件事情,絕對(duì)需要付出很多精力腦力。前面我提到的很多問(wèn)題,其實(shí)都有很多方法可以對(duì)付它們,或者在它們暴露之前就可以扼殺在搖籃中。如果有豐富的經(jīng)驗(yàn)應(yīng)該已經(jīng)一早就能意識(shí)到前面有多少坑了。開(kāi)發(fā)經(jīng)驗(yàn)很有用,解決實(shí)際問(wèn)題的能力很重要。以后還得多積累積累,做到臨危不亂,沉著應(yīng)對(duì),談笑間檣櫓灰飛煙滅。
*****
> 已建立一個(gè)微信前端交流群,如要進(jìn)群,請(qǐng)先加微信號(hào)freedom20180706或掃描下面的二維碼,請(qǐng)求中需注明“看云加群”,在通過(guò)請(qǐng)求后就會(huì)把你拉進(jìn)來(lái)。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily),歡迎閱讀。

- ES6
- 1、let和const
- 2、擴(kuò)展運(yùn)算符和剩余參數(shù)
- 3、解構(gòu)
- 4、模板字面量
- 5、對(duì)象字面量的擴(kuò)展
- 6、Symbol
- 7、代碼模塊化
- 8、數(shù)字
- 9、字符串
- 10、正則表達(dá)式
- 11、對(duì)象
- 12、數(shù)組
- 13、類(lèi)型化數(shù)組
- 14、函數(shù)
- 15、箭頭函數(shù)和尾調(diào)用優(yōu)化
- 16、Set
- 17、Map
- 18、迭代器
- 19、生成器
- 20、類(lèi)
- 21、類(lèi)的繼承
- 22、Promise
- 23、Promise的靜態(tài)方法和應(yīng)用
- 24、代理和反射
- HTML
- 1、SVG
- 2、WebRTC基礎(chǔ)實(shí)踐
- 3、WebRTC視頻通話(huà)
- 4、Web音視頻基礎(chǔ)
- CSS進(jìn)階
- 1、CSS基礎(chǔ)拾遺
- 2、偽類(lèi)和偽元素
- 3、CSS屬性拾遺
- 4、浮動(dòng)形狀
- 5、漸變
- 6、濾鏡
- 7、合成
- 8、裁剪和遮罩
- 9、網(wǎng)格布局
- 10、CSS方法論
- 11、管理后臺(tái)響應(yīng)式改造
- React
- 1、函數(shù)式編程
- 2、JSX
- 3、組件
- 4、生命周期
- 5、React和DOM
- 6、事件
- 7、表單
- 8、樣式
- 9、組件通信
- 10、高階組件
- 11、Redux基礎(chǔ)
- 12、Redux中間件
- 13、React Router
- 14、測(cè)試框架
- 15、React Hooks
- 16、React源碼分析
- 利器
- 1、npm
- 2、Babel
- 3、webpack基礎(chǔ)
- 4、webpack進(jìn)階
- 5、Git
- 6、Fiddler
- 7、自制腳手架
- 8、VSCode插件研發(fā)
- 9、WebView中的頁(yè)面調(diào)試方法
- Vue.js
- 1、數(shù)據(jù)綁定
- 2、指令
- 3、樣式和表單
- 4、組件
- 5、組件通信
- 6、內(nèi)容分發(fā)
- 7、渲染函數(shù)和JSX
- 8、Vue Router
- 9、Vuex
- TypeScript
- 1、數(shù)據(jù)類(lèi)型
- 2、接口
- 3、類(lèi)
- 4、泛型
- 5、類(lèi)型兼容性
- 6、高級(jí)類(lèi)型
- 7、命名空間
- 8、裝飾器
- Node.js
- 1、Buffer、流和EventEmitter
- 2、文件系統(tǒng)和網(wǎng)絡(luò)
- 3、命令行工具
- 4、自建前端監(jiān)控系統(tǒng)
- 5、定時(shí)任務(wù)的調(diào)試
- 6、自制短鏈系統(tǒng)
- 7、定時(shí)任務(wù)的進(jìn)化史
- 8、通用接口
- 9、微前端實(shí)踐
- 10、接口日志查詢(xún)
- 11、E2E測(cè)試
- 12、BFF
- 13、MySQL歸檔
- 14、壓力測(cè)試
- 15、活動(dòng)規(guī)則引擎
- 16、活動(dòng)配置化
- 17、UmiJS版本升級(jí)
- 18、半吊子的可視化搭建系統(tǒng)
- 19、KOA源碼分析(上)
- 20、KOA源碼分析(下)
- 21、花10分鐘入門(mén)Node.js
- 22、Node環(huán)境升級(jí)日志
- 23、Worker threads
- 24、低代碼
- 25、Web自動(dòng)化測(cè)試
- 26、接口攔截和頁(yè)面回放實(shí)驗(yàn)
- 27、接口管理
- 28、Cypress自動(dòng)化測(cè)試實(shí)踐
- 29、基于Electron的開(kāi)播助手
- 30、SkyWalking使用和排查分析
- 31、IP白名單變遷史
- Node.js精進(jìn)
- 1、模塊化
- 2、異步編程
- 3、流
- 4、事件觸發(fā)器
- 5、HTTP
- 6、文件
- 7、日志
- 8、錯(cuò)誤處理
- 9、性能監(jiān)控(上)
- 10、性能監(jiān)控(下)
- 11、Socket.IO
- 12、ElasticSearch
- 監(jiān)控系統(tǒng)
- 1、SDK
- 2、存儲(chǔ)和分析
- 3、性能監(jiān)控
- 4、內(nèi)存泄漏
- 5、小程序
- 6、較長(zhǎng)的白屏?xí)r間
- 7、頁(yè)面奔潰
- 8、shin-monitor源碼分析
- 前端性能精進(jìn)
- 1、優(yōu)化方法論之測(cè)量
- 2、優(yōu)化方法論之分析
- 3、瀏覽器之圖像
- 4、瀏覽器之呈現(xiàn)
- 5、瀏覽器之JavaScript
- 6、網(wǎng)絡(luò)
- 7、構(gòu)建
- 前端體驗(yàn)優(yōu)化
- 1、概述
- 2、基建
- 3、后端
- 4、數(shù)據(jù)
- 5、后臺(tái)
- Web優(yōu)化
- 1、CSS優(yōu)化
- 2、JavaScript優(yōu)化
- 3、圖像和網(wǎng)絡(luò)
- 4、用戶(hù)體驗(yàn)和工具
- 5、網(wǎng)站優(yōu)化
- 6、優(yōu)化閉環(huán)實(shí)踐
- 7、后臺(tái)上傳大批量圖優(yōu)化
- 數(shù)據(jù)結(jié)構(gòu)與算法
- 1、鏈表
- 2、棧、隊(duì)列、散列表和位運(yùn)算
- 3、二叉樹(shù)
- 4、二分查找
- 5、回溯算法
- 6、貪心算法
- 7、分治算法
- 8、動(dòng)態(tài)規(guī)劃
- 程序員之路
- 大學(xué)
- 2011年
- 2012年
- 2013年
- 2014年
- 項(xiàng)目反思
- 前端基礎(chǔ)學(xué)習(xí)分享
- 2015年
- 再一次項(xiàng)目反思
- 然并卵
- PC網(wǎng)站CSS分享
- 2016年
- 制造自己的榫卯
- PrimusUI
- 2017年
- 工匠精神
- 2018年
- 2019年
- 前端學(xué)習(xí)之路分享
- 2020年
- 2021年
- 2022年
- 2023年
- 2024年
- 2025年
- 日志
- 2020
