網(wǎng)站建設(shè)公司前端框架開發(fā)流程詳解。在博納網(wǎng)絡(luò)深圳
網(wǎng)站建設(shè)公司，前端團(tuán)隊(duì)有著在后端開發(fā)之前就進(jìn)行多次迭代的絕佳優(yōu)勢(shì)。我們先對(duì)想要?jiǎng)?chuàng)建或更新的功能設(shè)定長(zhǎng)期的目標(biāo)，然后一拿到經(jīng)過確認(rèn)的原型，就交給開發(fā)團(tuán)隊(duì)去實(shí)現(xiàn)。在過去的項(xiàng)目中，我們也許說過：“好了，這就是我們希望輸出的標(biāo)記格式，請(qǐng)盡可能保持一致。”我們會(huì)使用一組 Mustache 或者 Twig 模板來創(chuàng)建標(biāo)記，然后告訴開發(fā)團(tuán)隊(duì)去創(chuàng)建能夠輸出同樣標(biāo)記的 PHP、Ruby、Angular、React 或 Ember 模板。這種方式的問題在于，有一半的開發(fā)時(shí)間都浪費(fèi)在讓后端輸出的標(biāo)記跟我們的原型保持一致上了。因?yàn)槲覀兛偸窃诮鉀Q“CMS 中輸出的標(biāo)記與我們的原型不同”的問題。
即使我們真的做到了讓那些標(biāo)記跟原型保持一致，往往也會(huì)擔(dān)心原型和 CMS 代碼不同步的問題。有可能其中一邊發(fā)生了變化，另一邊卻沒有，最終慢慢導(dǎo)致我們的原型不被信任。我們不能確定原型與正在開發(fā)的產(chǎn)品是否一致，對(duì)功能的迭代又是直接在 CMS 代碼上做改動(dòng)。這個(gè)問題的原因在于，CMS 和原型開發(fā)工具使用的是不同的 HTML 模板，即使它們共享了 CSS 和 JavaScript 文件。在對(duì)博納網(wǎng)絡(luò)網(wǎng)站建設(shè)公司對(duì)客戶網(wǎng)站的主題進(jìn)行重構(gòu)時(shí)，我們有機(jī)會(huì)徹底解決這個(gè)“最后一公里”的問題。
網(wǎng)站建設(shè)公司前端框架開發(fā)流程詳解之征服最后一公里
我們的問題是，Drupal 有一個(gè)非常固執(zhí)的渲染引擎，因?yàn)闃?biāo)記必須通過 Drupal 才能渲染，所以如果不運(yùn)行 Drupal，就很難制作標(biāo)記的原型。因此，我們決定顛覆一下 Drupal 的渲染途徑，并加入自己的解決方案。我們想要一個(gè)可以在原型工具、Drupal、WordPress，以及其他任何希望采用我們的設(shè)計(jì)系統(tǒng)的平臺(tái)上都能使用的解決方案。我們從 Twig 模板語言入手，因?yàn)樗墒烨曳€(wěn)定，還擁有 PHP 和 Node 編譯引擎。既然我們已經(jīng)有了一個(gè)通用的渲染引擎，它允許在原型工具中使用跟實(shí)際開發(fā)中一致的模板文件，那么就再也不用擔(dān)心系統(tǒng)之間轉(zhuǎn)換模板的問題了。一旦在樣式文檔中創(chuàng)建了一個(gè)樣例，我們就可以把用于那個(gè)樣例的數(shù)據(jù)集記錄下來，交給后端開發(fā)人員來實(shí)現(xiàn)。在某種程度上，我們創(chuàng)建了一個(gè)設(shè)計(jì)系統(tǒng)的 API，或者一個(gè)樣式服務(wù)，它為用戶提供了一個(gè)簡(jiǎn)單、清晰、跨平臺(tái)的接口，用于接收數(shù)據(jù)輸入和輸出相同的 HTML。
一系列標(biāo)準(zhǔn)的產(chǎn)出
數(shù)據(jù)和模板的關(guān)系很快成為我們的設(shè)計(jì)系統(tǒng)中非常重要的部分。開發(fā)人員開始要求提供模板變量的列表、可變的內(nèi)容類型，以及它們當(dāng)中哪些是必選項(xiàng)。這些要求很重要，我們也希望給開發(fā)人員提供盡可能完整的信息。于是，就有了和所有的組件和布局一同提供的一系列標(biāo)準(zhǔn)產(chǎn)出。一系列標(biāo)準(zhǔn)的組件產(chǎn)出如下。JSON模式該模式定義了組件的各種屬性（變量）、內(nèi)容類型，以及其中哪些是必選項(xiàng)。模板文件Twig 文件接收由 JSON 模式定義的一組數(shù)據(jù)?？蛇x數(shù)據(jù)被放在 if 語句之后，而數(shù)組數(shù)據(jù)則會(huì)被遍歷。Sass partial所有的組件樣式都來自單一的 Sass partial 文件 。它會(huì)被編譯到主樣式 style.css 中，或者作為一個(gè)獨(dú)立的 CSS 文件被加載進(jìn)來。可視化的回歸測(cè)試
這個(gè)文件描述了每一次運(yùn)行回歸測(cè)試時(shí)，需要測(cè)試的所有的瀏覽器寬度和組件狀態(tài)。在加入任何新的代碼前，一定要通過這些測(cè)試。
網(wǎng)站建設(shè)公司前端框架開發(fā)流程詳解之測(cè)試數(shù)據(jù)
這個(gè)文件允許構(gòu)造測(cè)試專用的數(shù)據(jù)來達(dá)到完整的測(cè)試覆蓋率，以及測(cè)試一些邊界情況。文檔文檔文件是為文檔工具 Hologram（https：//github.com/trulia/hologram）提供數(shù)據(jù)的 markdown 文件，它提供組件的描述并列明其功能。此外，文檔頁還提供組件的可視化表示和在線編輯器，以供測(cè)試不同的內(nèi)容和創(chuàng)建該內(nèi)容集合的分享鏈接。網(wǎng)站建設(shè)公司前端框架開發(fā)流程詳解之文檔數(shù)據(jù)
文檔數(shù)據(jù)是文檔頁用來創(chuàng)建初始視圖的原始數(shù)據(jù)。上述所有這些文件對(duì)于功能開發(fā)而言都是寶貴的產(chǎn)出，但其中有一個(gè)文件是整個(gè)流程的奠基石，因此也通常首先創(chuàng)建，那就是 JSON 模式。在這些產(chǎn)出中，沒有哪個(gè)文件比 JSON 模式更好地描述了這項(xiàng)功能的需求和能力。每當(dāng)一個(gè)組件的功能發(fā)生變化時(shí)，都是先由模式引起的，然后才擴(kuò)展到組件的其他文件。正因?yàn)槟Ｊ轿募绱酥匾赃@個(gè)開發(fā)流程稱為模式驅(qū)動(dòng)的設(shè)計(jì)系統(tǒng)。好了，
深圳網(wǎng)站建設(shè)公司本文關(guān)于“網(wǎng)站建設(shè)公司前端框架開發(fā)流程詳解”知識(shí)就分享到這里。如果您要找網(wǎng)站建設(shè)公司定制高端網(wǎng)站，聯(lián)系我們?cè)诰€客服，獲取免費(fèi)解決方案。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
