公司官網前端開發經驗分享

公司官網的重要性和特殊性不言而喻。 不少前端都會經歷這個項目，筆者有幸在所就任的每家公司都負責過官網的前端開發工做。開發中遇到過不少問題，反思起來值得和你們一塊兒分享，以減小或者減低你們可能遇到的問題。

---

理想開發流程 UI => 開發 =》 測試 =》 上線

現實開發流程 需求方 =》 UI => 開發 =》需求方 =》 UI => 測試 =》需求方 =》 ...... UI => 上線 =》需求方 =》 UI => 開發 測試 =》上線

實際開發中需求及UI會一直調整，直到上線之後仍會不停調整。 因此，前期的需求評審相當重要。必定要讓需求方（通常是市場部負責人）評審經過之後再開發。

吐槽：官網是我見到爲數很少的產品總監PK不過市場總監的項目之一。通常項目，前端展現效果產品總監拍板便可。

---

0. 特性

1. 跨部門溝通
2. 跨項目耦合
3. PWA
4. 測試的重要性
5. 工期的緊迫性
6. 項目重要性
7. SEO的重要性

1. 跨部門溝通

因爲官網的特殊性，官網一般會涉及多部門協做。

• 市場部：需求方，通常官網都必須知足市場部推廣需求
• 銷售部：半需求方，通常官網都必須知足市場部推廣需求
• 人力部：半需求方，輔助招聘需求
• 客服部：半需求方，輔助客服需求
• 產品部：設計，對UI及UE負責
• 開發部：開發，對技術及開發進度負責
• 測試部：測試，對質量、效果負責，保證測試充分
• 運維部：運維，對網絡及服務器負責
• 運營部：文案，對文案及SEO推廣負責
• 國際化：翻譯，保證文案翻譯的準確性及效率（通常小公司會外包，因此必須保證時效）

2. 跨項目耦合

• 用戶系統：實現單點登陸（SSO）功能
• 公司產品：涉及到公司產品的子項目
• 官方博客：如blog、wiki、zendesk等
• 客服功能：WeChat、App、小程序、微博等功能的集成

3. PWA

1. 可靠性

• 跨終端可用性
• 離線能夠訪問基本功能
• 保證服務長期可訪問

2. 快速性

• 可交互等待時長
• 加載速度

3. 友好性

• 合理的佈局
• 友好的UI設計
• 便捷的交互
• 適合不一樣國家的用戶使用習慣，如阿拉伯語國家 direction
• 無障礙閱讀

4. 測試的重要性

• 自測
• 產品
• 測試部門
• 公司內測

5. 工期的緊迫性

因爲官網是企業對外宣傳的重要工具，因此通常會要求時效性，如新聞、諮詢、招聘信息等及時更新。

以及活動頁的開發，如週年慶、春節、促銷、展會、推廣等活動。

6. 項目重要性

因爲官網是企業的門面，通常公司（中小型企業）的老闆都會對官網親自把關，經過官網來展示公司的企業文化。因此，假若你在中小型企業，接手官網的話，拿出看家本領把官網作好也是很是值得的。

7. SEO的重要性

因爲官網的特殊性，每每公司會付費作SEO推廣，因此，官網的SEO友好性不言而喻。這就要求咱們在項目技術選型期要慎重考慮，想辦法將SEO作的更好，這樣就能夠大幅節省推廣成本，達到事半功倍的效果。

如今適合SEO的方法比較多，如SSR、Prerender等其餘方式。

檢查清單

1. 參與需求評審，待定稿後開始開發
2. 工期預估，按正常工時的1.5-2倍時間進行預估，後期更改會比較頻繁
3. 硬件條件提早準備，如服務器、SSL、HTTPS等須要提早準備，待項目上線前搞定。
4. 對老官網的兼容性，新官網發佈前務必郵件告知公司所有高管，讓你們自行修改，處理新老官網更換代理的問題。如，頁面路徑發生變化。
5. 統計工具兼容（友盟、GA等）
6. 埋點及上報代碼不該遺漏
7. 公測（公司內部測試，儘可能保證1周左右的時間，讓你們體驗並上報問題）