基于OBE理念的Web前端開發技術課程教學改革

吳鴻韜，李 智，袁玉倩

（河北工業大學 人工智能與數據科學學院，天津 300401）

0 引言

隨著互聯網技術不斷發展，Web應用不斷增加，Web編程在軟件產業中的比重越來越大。“前端工程師”是近幾年才開始受到重視的新興職業，其主要職責是利用HTML/CSS/ JavaScript等各種技術開發產品界面，增加交互功能，同時結合后臺開發技術進行各種Web 應用開發[1]。軟件產業對Web前端開發人員的需求量迅猛上升，使得作為Web開發人員基本專業課程的Web前端開發技術課程日益重要。

為了提高Web前端開發技術課程的教學效果，教育工作者們開始對教學方法和教學手段等進行改革，以提高學生的學習興趣和主動性，培養學生的實踐能力。文獻[1]探討了基于崗位班構建分段式人才培養模式和項目化崗位課程體系，闡述了“小班化、項目式、多形式融合、多渠道互動”的教學改革實踐。基于分布式學習模式，文獻[2]提出有效整合線上線下教學環節。文獻[3]在國家“新工科”工程教育改革背景下，提出采用“能力導向、項目驅動”的框架模型來對Web編程技術課程的實驗教學進行改革。

由于前端技術內容豐富，綜合性、實踐性比較強，因此學習難度較大。隨著大數據、互聯網+、人工智能的蓬勃發展，傳統的知識性教育正在向以能力為導向的教育模式轉變，如何改革現有Web前端開發技術教學模式，以適應新形勢下對高質量計算機軟件工程人才的需求，是計算機專業教育工作者面臨的重要挑戰。

1 基于OBE理念的教學內容改革

作為工程教育專業認證遵循的核心理念之一，OBE（outcome based education）是一種以學生學習成果為導向的教育理念，強調學生在課程學習結束后獲得的知識、能力、素質。現有的Web前端開發技術課程的國家級規劃教材大多只介紹HTML、CSS、JavaScript等前端開發所需要的基礎知識，而對從事前端開發工作所需要的開發框架/庫很少涉及，阻礙了知識向職業能力的轉化。教育部在打造“金”課的相關文件中指出要通過“合理提升學業挑戰度、增加課程難度、拓展課程深度”的手段來切實提高課程教學質量。文獻[4]指出“要給課堂教學擠‘水’添‘金’，必須將以教為中心的教學轉變為以學為中心的教學”，而對于“以學為中心”的教學來說，教學內容改革應從教什么向學什么轉變。在成果導向教育理念下，知識結構強調與職業需求相適應，教什么主要取決于學生的學習產出[4]。因此，Web前端開發技術課程的教學內容不應再拘泥于教材固有內容進行教學，提出以“提供與職業需求相適應的、多樣性的教學內容”為目標對教學內容進行改革。

1.1 以崗位職責需求為核心

基于OBE理念的教學模式不再是正向的知識灌輸，而是圍繞學生的最終“成果”來組織和開展教學，以明確的綜合能力的掌握為目標反向設計教學過程，最終促成學習成果的達成。OBE的反向設計是從“需求”開始的，強調了“行業與用人單位的需求是構建專業教育知識、能力和素質結構的重要依據”[5]。

在充分調研招聘網站上Web前端開發工程師崗位職責需求之后，結合從事Web前端開發工作的往屆畢業生的調研反饋，課程教學內容可設計為兩大模塊。

（1）基礎知識模塊：介紹從事Web前端開發工作所需的基礎知識，包括HTML、CSS、JavaScript等內容。

（2）高級開發技術模塊：介紹從事Web前端開發工作常用的Web前端開發框架/庫等。

1.2 以提供多樣性的學習內容為目標

OBE理念強調以學生為中心，提倡教師以學生為中心設計教學內容，在教學內容上更注重選擇性：教師根據學生的情況，提供不同的教學內容供不同能力水平的學生選擇，學生則根據自己的不同情況和能力期望來選取相應的、適合自己的教學內容[6]。因此，Web前端開發技術課程的教學內容應該具有多樣性，最大程度上擴展學生的視野，增加課程內容的可選擇度，有助于學生通過自主學習獲得個性化的學習結果。Web前端開發技術教學內容的多樣性主要體現在如下兩方面。

1）提供多樣性的前端框架/庫介紹。

Web前端是互聯網行業的重要組成部分，用于Web前端開發的一系列框架/庫層出不窮，且各有千秋。不同的互聯網公司在進行Web前端時所選用的前端框架/庫也不盡相同。因此，我校Web前端開發技術課程的教學內容對主流的前端框架/庫均應有所涉及，幫助學生了解Web前端開發技術前沿、現狀，便于學生自主選擇Web前端開發技術的學習路徑。

2）增加數據可視化的Web前端開發。

數據可視化前端開發是Web前端開發的一種，主要是應用Web前端開發技術和數據可視化技術來進行Web前端開發，目前互聯網公司對其需求逐漸增多。數據可視化的Web前端開發也有助于學生了解大數據分析的相關知識。

1.3 以強化課程間的關聯性為補充

傳統的“過分強調知識目標，忽略了對能力的達成和素養的提高”教學模式使得學生在課程學習過程中會形成“知識孤島”現象，難以建立完整而系統的專業知識體系，導致學生僅有知識而不具備知識遷移技能以及將知識應用于實際的能力，阻礙了知識向職業能力的轉化。OBE理念打破了課程之間的壁壘，弱化了課程本身的系統性、完整性和連續性，強化了課程之間的聯系性[5]。因此，基于OBE理念的Web前端開發技術課堂教學設計必須放在大的專業背景體系中，將相關的教學內容進行合理、有效的拓展，讓學生將所學知識與未來的應用進行有效銜接。

結合我校實際情況，Web前端開發技術課堂教學增加了前端開發和后端開發交互的教學案例。通過該案例，學生不但可以了解前、后端開發通過JQuery、Ajax等技術進行交互的基本原理，還把Web前端開發技術與數據庫原理及應用、.Net程序設計等課程知識有機融合在一起，有助于學生了解相關課程知識在實際工作中的應用。

1.4 持續改進

持續改進是OBE理念的重要組成部分。為了更好地實現“以學生為中心”的教學內容設計模式，在學期末課程結束時，通過調研問卷的形式獲取學生對教學內容的反饋和建議，結合從事前端開發的畢業生、實習生的調研反饋，對Web前端開發技術的課程教學內容進行動態更新。

目前，受限于有限的理論教學學時，我校的Web前端開發技術課程主要以Bootstrap為例介紹前端開發框架/庫。根據調研結果，我校擬在適當增加理論授課學時的基礎上，將Web前端開發框架/庫的介紹重點從Bootstrap轉為Vue.js。

2 基于OBE理念的案例教學方法

基于OBE理念的教學內容設計模式在原有教學內容的基礎上，針對學生能力的個性化提升，又拓展了大量的教學內容。受制于有限的教學學時，傳統的“循序漸進”“以知識體系為導向”的教學模式無法滿足實際教學需要。

基于OBE理念的課程教學要求以學生為中心，通常采用交互性強的教學方法，引導學生進行課程學習，并注重對學生發散思維、創新思想以及工程觀點的培養[6]。為了適應OBE理念的要求,教師應根據不同的教學內容，選擇多途徑、多樣化的教學策略，優化學生學習體驗，努力提高每個學生的課程參與度。

“施教之功，貴在引路，妙在開竅”[4]，因此，為了達成基于OBE理念的課程學習的成果目標，使學生獲得預期課程學習成果，提出基于OBE理念的案例教學方法，該方法主要步驟包括以下幾方面。

1）以項目導向為原則設計教學案例。

在OBE理念中，大學課堂教學不應該再是按照“循序漸進”的原則進行“填鴨式”教學，而應該是“間斷性”和“階躍式”的，要讓學生自己學會修補一個個“間斷點”、跨上一個個“臺階”[5]，因此Web前端開發技術的教學實踐不再是按照傳統的章節/知識點來組織教學內容，而是把相關章節的知識點以項目導向為原則，有機融合在教學案例中。對于教材中的陳述性的低階知識，一部分作為教學案例的組成元素，一部分通過實驗、作業來引導學生自主學習。

2）以多元化為特征進行教學案例分類。

教學策略方面，OBE理念強調以學生的能力狀況為起點，根據不同學生的能力現狀提供不同的學習內容，制定差異化的教學策略[5]，因此，教學案例被分為以下3類。

（1）基礎類教學案例：主要以教材中的內容為主，需要在課堂上詳細講授，并通過實驗、作業等考核手段要求所有學生必須達到預期的教學目標。

（2）核心類教學案例：以補充的教學內容為主，采用“以學為中心”的教學模式[4]，引導和推動學生在教學中的自主性、能動性和創造性，激發學生自主學習的意識。通過改革實驗考核手段，鼓勵學生通過自主學習來拓展、完善、重構教學案例。

（3）拓展類教學案例：這部分主要沒有歸入核心類的前端開發框架/庫案例、可視化前端開發案例和少量高級前端開發技術案例，主要目的是為學生的個性化學習和深入學習提供教學資源。

3）以問題求解為導向實施案例分析教學。

當前的教學過程中，忽視了工程環境中以問題求解為導向的主動學習，缺少啟發式教學和基于實際工程項目的案例教學[7]，導致教學模式與培養途徑與工程實際能力培養不適應。為了提高課程教學質量的含“金”量，必須將課堂教學中的重學輕思轉變為學思結合[4]。在教學實施過程中，教師在課堂上可采用以問題求解為導向的案例分析教學，培養學生解決復雜工程問題的思維；課前設置問題，課后布置作業，引導學生通過查閱資料、討論等方式，解決疑問、加深理解、提高認識水平。

4）以微課為補充實施課外教學。

當今的學生，成長的背景是互聯網、移動互聯網高速發展的時代，知識信息獲取渠道多元，已經養成了從互聯網上獲取學習資源的習慣和能力，因此，可以把教學案例錄制成微課，利用微課這種新型教學模式來作為課堂教學模式的有效延伸，使學生能夠利用課外碎片時間有選擇地進行自主學習，進而提高學生的課程參與度，促進師生間的交互。

3 教學改革效果

我校的Web前端開發技術課程是從已有的可視化編程技術課程更新教學內容而來的，包含16學時的理論授課和16學時的課內實驗。為了提高教學效果，自2018年秋季學期開始實施基于OBE理念的教學改革。在學期末以作業的形式調研教學改革的效果，以實施持續改進。

根據2018年秋季學期的調研數據，對于授課過程中補充的教學案例，31%的學生反饋的結果是“非常感興趣”，50.7%的學生反饋的結果是“感興趣”；34.3%的學生認為補充的教學案例“非常有幫助”，44%的同學認為補充的教學案例“有幫助”。

2018年秋季學期，Web前端開發技術課程的實驗環節共設置了4個實驗，基于教材內容和拓展的教學案例各設置了2個實驗。基于拓展的教學案例的實驗主要考查前端開發技術框架/庫與數據可視化工具的應用。調研數據表明，38%的學生主動學習了課堂上沒有介紹過的前端開發技術，39%的學生主動學習了課堂上介紹的前端開發技術。在按照實驗要求完成實驗的基礎上，有44%的學生主動拓展了實驗內容。在2018年秋季學期結束后，根據調研反饋，對實驗內容進行了持續改進，把原來的2個基于教材內容設計的實驗整合為一個綜合性的實驗，新增1個前端開發與后端開發結合的實驗。

4 結語

OBE理念中以學生為中心的教學模式，強調學生在教學中的主體地位。為了加快知識向職業能力的轉化，我們基于OBE理念探討了Web前端開發技術課程的教學內容改革和教學方法改革。通過“以崗位職責需求為核心、以提供多樣性的學習內容為目標、以強化課程間的關聯性為補充”的原則，在教材已有內容的基礎上，拓展教學內容，向學生提供與職業需求相適應的、多樣性的教學內容，有助于學生獲得個性化的學習結果；另外一方面，融合了以項目導向為原則、以多元化為特征、以問題求解為導向、以微課為補充的案例教學方法，則有助于教學從“以教為中心”向“以學為中心”轉變，有助于學生獲得的知識結構與職業需求相適應。