Preliminary Exploration of Front ‐ end Development Training and Teaching Reform Based on CDIO Concept

: In recent years, front-end development has become one of the key choices for college students' employment. This paper draws on the concept of CDIO engineering education and combines the responsibilities of front-end development engineers. According to the teaching mode of our school's "Front-end Development Training" course, the teaching content, teaching methods and Carry out reform research on assessment methods and other aspects. Combined with the existing problems in teaching, corresponding solutions are put forward, and the CDIO concept is run through the whole teaching process, so that students can deeply understand the construction process of engineering projects, and cultivate students' engineering ability and innovative quality.


Introduction
In the Internet era, platform-based operation is the new mode of future development, which provides a good opportunity for IT talents, especially front-end development talents, and Hu Ruhui [1] show it is especially important to offer front-end development courses in order to cultivate excellent front-end development engineers. As the first comprehensive practical course for software engineering majors, "front-end development training" requires students to have solid front-end skills, certain innovation and application ability, and strong teamwork ability. The traditional teaching contents and methods can no longer meet the needs of students.
Edward F C, et al. [2] show the CDIO engineering education model includes four basic elements: Conceive, Design, Implement and Operate, covering the whole life cycle from product development to product operation Introducing the CDIO concept into the teaching of "front-end development practical training" course can build the working framework of real enterprise software project development for students, allowing them to learn in an active, practical and systematically integrated way, improving their learning ability and engineering practice ability.

Current Status of Course Teaching
"Front-end Development Practical Training" is a practical teaching course for all majors in the School of Software Engineering of Chongqing College of Arts and Sciences, which is held in the 5th semester with 16 hours. This course aims to cultivate students' engineering ability and innovation quality.

Teaching Content
In the whole book industry, there are many front-end series of textbooks, but there are only a few textbooks about frontend development practical training, the existing textbooks are not used because the content is lagging behind or the technology is not comprehensive, and the relevant free video materials on the network are also scarce. At present, the course uses the teacher's own handouts to carry out teaching activities, mainly including two parts, HTML + CSS technology for web page layout and beautification, JavaScript + jQuery for the design of dynamic web page effects. To improve development efficiency, framework technologies such as Bootstrap and MUI can also be used.

Teaching Methods
Under the traditional teaching method, teachers demonstrate and complete "small sections" of web pages according to project requirements, and students follow the same method to complete the same content. This way of teaching "emphasizes the result but not the process" and "completes for the sake of completing", which highlights and emphasizes the importance of knowledge and skills, but stifles students' creative thinking, fails to reflect students' individual differences, and directly affects the quality of classroom teaching.

Assessment Method
After taking the course, students must design and complete a complete website project within two weeks. The current assessment method makes some students take advantage of the loopholes and focus only on the application of the assessment points, and submit unattractive or even "disastrous" work, which brings great trouble to the teacher's evaluation.

Current Problems
With limited course hours, "front-end development practical training", as a highly comprehensive practical teaching course, has a lot of content and involves a lot of prerequisite courses, and new front-end technologies and frameworks are emerging all the time, which brings great inconvenience to teachers in organizing teaching. At the same time, due to the existence of some objective factors, Cao Haiping and Guan Tuhua [3] show it is difficult to effectively carry out the front-end development practical training activities. They are reflected in the following aspects.
(1) Teaching resources are relatively scarce. The front-end development training involves all the contents of the frontend series courses, which makes it impossible for us to have a complete set of teaching resources in a short time. The resources obtained after a lot of trouble are not systematic.
(2) Practical training content is relatively lagging behind. To improve the efficiency of front-end development, various frameworks and technologies have been born one after another, typically React.js, Angular and Vue.js, etc. The course teaching process does not introduce new technologies, making students disconnected from the needs of modern enterprises or companies.
(3) The teaching style is too homogeneous. In a continuous 16-hour (4-week) teaching schedule, students complete the appropriate content according to the instructor's demonstration and are able to understand and digest the classroom content, but do not have sufficient time and energy to think about how to organize and implement their selfdesigned projects, which is also not conducive to knowledge expansion.
(4) The assessment and evaluation system is not perfect. Under the existing assessment and evaluation system, the practical training reports written by students are all the same, and there is almost no hierarchy in the projects submitted, which cannot highlight the advantages of the top students.

Teaching Reform Measures
In the process of job hunting, university students often encounter obstacles because they have no project experience and work experience. In response to this phenomenon and the problems in the teaching process, reform practices are carried out in the following aspects.

Adjustment of Teaching Schedule
The original 4-week (4+4+4+4) class schedule is adjusted to 2+2+2+4+4+2 class hours with relatively long intervals (from long to short) without increasing the number of hours. The preparatory work for the "Front-end development training" course (topic selection, prototype design, technical route, allocation of team members' responsibilities, etc.) is a time-consuming task, and it is impossible to "start from scratch" once the plan is determined and the project is implemented. Therefore, the time interval of the first three classes should be relatively long, which is conducive to the consolidation of students' basic engineering knowledge and the cultivation of teamwork ability.

Restructured Practical Training Content
Under the situation that teaching resources are relatively scarce and practical training contents are relatively lagging behind, it is especially important to reconstruct the contents of practical training. Teachers ask students to set up project groups (2-3 people/group) after the first class, complete the project selection and clarify the division of labor within the group. The e-commerce projects such as Jingdong, Taobao and Tmall are usually chosen as teaching cases to organize the teaching contents for the following reasons.
(1) New Era college students use Jingdong and other ecommerce websites more frequently on weekdays, whether on PC or mobile, and are more familiar with the web layout and page content.
(2) Easy access to online resources (e.g., text, images, etc.), teachers will focus on the use of technology during instruction to avoid randomly entering test data resulting in poor page presentation, affecting students' aesthetics, or even aversion to learning.
(3) The e-commerce project involves all the knowledge points learned in the previous course and is used as a project case with strong representation.
(4) Students can learn from the development experience of excellent front-end engineers. "There are many different code implementation methods for the same page display effect, so you can learn something from the method and performance.

Diversified Teaching Methods
Lu JiQing and Xu Qing [4] show the CDIO engineering education concept is flexibly integrated into the teaching activities to highlight the student-centered concept. Diverse teaching methods are actively explored and teaching activities are carried out mainly in the following ways, as shown in Table 1.

Improve the Assessment Mechanism
Cheng Aijing et al. [5] think the CDIO engineering education model focuses on cultivating students' four competencies: engineering fundamentals, individual ability, teamwork ability and engineering system. In order to fully reflect the application of CDIO concept in the course of "front-end development training" and to equip students with the ability to conceive, design, implement and run products/systems at both enterprise and social levels, a new assessment and evaluation mechanism is set up -using the course sessions as marking points, reflecting the importance of process monitoring. As shown in Table 2. Throughout the practical training, students are tested on their ability to build engineering systems for front-end projects, their individual abilities such as manuscript writing, language expression and skill application, as well as their teamwork skills.

Achieving Results
The new teaching reform plan was adopted for one year, which was unanimously recognized by students and colleagues, and achieved initial results.
(1) Increased student participation. After grouping students together during the project conceptualization stage, the group members negotiate the project selection and assignment of responsibilities. Each student is made clear about the roles and tasks he or she will undertake during the subsequent project design, implementation and operation, so that each can take on his or her own role and progress together.
(2) Enhance the engineering practice ability. The CDIO concept was introduced into the practical training process, so that students could understand that front-end project design is not just a "patchwork" but a systematic project. By copying the website projects of large enterprises such as Jingdong and Taobao, students learn the front-end project experience of excellent front-end development engineers (including: how to consider the layout, how to deal with details, etc.) and strengthen the training of job skills.
(3) Strengthened the sense of teamwork. During the whole practical training process, students no longer work individually and alone, but participate in the whole process. This lays a good foundation for the future to go to the workplace and participate in project development.

Deficiencies
In the process of reform, there are still some shortcomings, mainly the following points.
(1) The phenomenon of "taking refuge in the easy" is serious. The students were divided into three levels: independent design, cut-out effect realization and online project copy. Almost all groups chose to copy the online project, meeting the minimum threshold requirement. At the same time, the projects were divided into three categories: PC, mobile and responsive, and students only chose to complete PC or mobile projects, but neglected the application of responsive.
(2) The value of individual contribution was not obvious. In the process of teamwork, almost all group members had equal scores and did not reflect individual differences, and some students even "got something for nothing".

Improvement Measures
In the future, continuous improvement is proposed in the following areas.
(1) Improve the group scoring rules. In order to reflect the workload of the project and the value of individual contribution, after scoring the group project, the scores of the group members are calculated with the group score as the average up and down, which is negotiated by the group members and supervised by the teacher of the class to fully reflect individual differences.
(2) Promote learning and teaching by competition. The competition is a platform to exchange skills and demonstrate the level, and is used to show and test the learning achievements. In the process of participating in the competition, students can discover their own strengths, find their own shortcomings, and clarify the direction of future efforts. Students are encouraged to participate in various skill competitions to improve their operational ability and creative level, so as to achieve the purpose of promoting learning and teaching through competitions.

Conclusion
Learning from the CDIO engineering education model, the reform of the "Front-end Development Training" course is conducive to cultivating and exercising students' comprehensive practical ability and teamwork spirit, and laying a necessary foundation for students to further learn new front-end development technologies and cultivate job skills. It is fully in line with the school orientation of Chongqing University of Arts and Sciences of "building applied disciplines, carrying out applied research, cultivating applied talents, and creating a high-level applied university".