前言

找了新工作後，進入一陣蜜月期，開始接手專案。這邊先說一下，我目前在一家報社當前端工程師，雖然說職稱很怪，但是做的東西的確是前端的內容。這邊的性質是接案型，前端的主管會委派你負責一個案子，主管前期會和你一起開會，之後就全權給你負責了。通常在一個案子，會有一個後端、設計、PM的人一起負責，而之後就要和他們協調可行性與技術問題，有點像是大學時期分組報告的感覺。由於前端完成時間只有一個禮拜，基本上架構並沒有很好，而且也沒有用很多有效率的工具，因此在這邊記錄，希望下次不要犯下面提到的錯誤。

工具

我自己用的是vscode直接切版，css都是全手工，這樣會讓我的css結構鬆散，到了開發後期非常難維護，幸好這個是活動網頁，要不然我會把自己殺死哈哈。開發之後需要各種文件的壓縮，像是HTML JS CSS的檔案，但是到了這邊我有點糾結，公司的人都在用gulp，但是感覺Webpack很潮，還能async loading，react也會用到。但後來決定先學著gulp，再來回頭學Webpack。總結了一下，下次需要用到的工具：

stylus
gulp
2.1 HTML JS CSS壓縮
npm install gulp gulp-html-replace gulp-minify-html gulp-minify-css gulp-uglify gulp-concat gulp-rename -save-dev
2.2 圖片的壓縮
npm install –save-dev gulp-imagemin
2.3 SSI(Server Side Includes)
這個能夠讓你一些重複的模板集中起來管理，更加方便開發，不需要每一個地方逐一修改
npm install browsersync-ssi

架構

當初主管和pm討論出來的結果是做一個entry page，再加上面六個幾乎一樣的活動頁面，和一個結束頁面，但是後來開發讓我覺得，這樣其實開發非常難維護，雖然後來用了SSI讓維護的工作稍微減輕，但是想到其實能用React做會更快。只要把我要的Header寫好，把不同的圖片當成參數傳進去當props，就能很快的維護了。但是後來想到這個活動會連動到後台的驗證，需要把全部換成JSP，應要開一個api驗證的話，會很浪費大家的時間。只能等下次有機會，練習用框架寫。

溝通

後端雖然很資深，但是技術能力偏弱，甚至活動頁面要驗證的事情，也是我到最後提醒才想起(這段是鳥事，唉)，和能力無法成正比，因此發現留意到這樣的問題，就要先幫忙想，要不然之後要幫忙收爛攤子。

一開始拿到設計圖後，沒有和設計和PM確認使用流程，導致後來要更改版型，甚至發現遺漏頁面。

結論

溝通不足，缺少工具的運用，希望下次不要遇到這樣的問題了！