Loading...
|
Please use this identifier to cite or link to this item:
https://nccur.lib.nccu.edu.tw/handle/140.119/157630
|
| Title: | Web前端網頁的繪製樣式
Patterns for Web Frontend Rendering |
| Authors: | 黃采婕
Huang, Tsai-Chieh |
| Contributors: | 廖峻鋒
陳宜秀
Liao, Chun-Feng
Chen, Yi-Hsiu
黃采婕
Huang, Tsai-Chieh |
| Keywords: | 前端開發
繪製樣式
人機互動
生成式AI
評量規準
DOM操作
繪製
Hydration
Frontend Development
Rendering Pattern
HCI
Generative AI
Rubrics
DOM Manipulation
Rendering
Hydration |
| Date: | 2025 |
| Issue Date: | 2025-07-01 14:01:41 (UTC+8) |
| Abstract: | 隨著現代網頁對於快速且流暢的使用體驗需求不斷提升，前端開發技術越來越多樣複雜，然而，現有文獻缺乏一套系統化的前端技術評估指引，導致開發者在選擇適合的解法時面臨困難，需耗費大量時間與心力。本研究旨在透過一套結構化的樣式系統，提供前端技術的系統化指引，以協助開發者更有效率的選用合適的解決方案。研究聚焦於三個核心領域：「操作 DOM」、「繪製」與「Hydration」，共建立 11 份樣式。為了評估這些樣式，作者引入生成式 AI（ChatGPT），搭配多面向的評量規準，這份評量規準根據過去研究中品質好的樣式所具備的屬性所建立，形塑出一套標準化且有效的評估架構。本研究進行兩輪樣式評估實驗，邀請具前端經驗的開發者與 ChatGPT 參與。第一輪中，人類評估者與 ChatGPT 皆依照評量規準，各自對樣式進行評分與回饋。第二輪則將人類回饋提供給 ChatGPT，觀察其在獲得更多語境資訊後回饋內容的變化。結果顯示，ChatGPT 在語境理解與結構推理方面有所進步，但在補充技術細節與準確解讀使用者需求方面，仍明顯落後於人類專家。本論文提出一套可應用於前端開發的實用樣式系統，並探討導入生成式 AI 進行樣式協作評估的可行性與侷限性。研究成果為未來推進前端繪製樣式的實務發展奠定了基礎，並為設計 AI 輔助評估流程提供了參考。
As modern web applications increasingly demand fast and seamless user experiences, frontend technologies have become more diverse and complex. However, the existing literature lacks a systematic guideline for evaluating frontend technologies, making it difficult and time-consuming for developers to select appropriate solutions. This thesis aims to provide a systematic guideline for frontend technologies through a structured system of patterns, helping developers more efficiently select appropriate solutions. Focusing on three core areas, namely, DOM manipulation, rendering, and hydration, this thesis introduces a total of 11 patterns. To evaluate these patterns, the author incorporates generative AI (ChatGPT) alongside multi-dimensional rubrics. These rubrics are based on attributes derived from high-quality patterns in prior research, forming a standardized and effective assessment framework. The author conducted a two-round evaluation process involving experienced frontend developers and generative AI (ChatGPT). In the first round, both human evaluators and ChatGPT independently assessed the patterns using the defined rubrics. In the second round, human feedback was provided to ChatGPT to examine how its responses evolved with additional context. The results indicate that the AI demonstrated improvements in contextual understanding and structural reasoning. However, it continued to lag behind human experts in supplying detailed technical insights and accurately interpreting user needs. This thesis presents a practical system of patterns for frontend development and explores the feasibility and limitations of incorporating generative AI into collaborative pattern assessment. The findings lay the groundwork for advancing rendering pattern practices and inform the design of future AI-assisted evaluation workflows. |
| Reference: | Alexander, C. (1977). A pattern language: Towns, buildings, construction. Oxford Uni versity Press.
Alexander, C. (1979). The timeless way of building. Oxford University Press.
Ana, A., Yulia, C., Jubaedah, Y., & Maosul, A. (2020). Assessment of student competence using electronic rubric. Journal of Engineering Science and Technology, 15(4), 2243–2253.
Badia, G. (2019). Holistic or analytic rubrics? grading information literacy instruction. College and Undergraduate Libraries, 26(4), 335–349.
Bai, A. (2023). Million.js: A fast compiler-augmented virtual dom for the web. The 37th ACM/SIGAPP Symposium on Applied Computing (SAC ’23), Article 4, 8 pages. https://doi.org/10.1145/3555776.3577683
Booch, G. (1994). Object-oriented analysis and design with applications (Second). Ben jamin Cummings.
Booch, G. (2006, March). On design. http://www.booch.com/architecture/blog.jsp? archive=2006-03.html
Breaux, T. D., Hibshi, H., Rao, A., & Lehker, J. (2012). Towards a framework for pat tern experimentation: Understanding empirical validity in requirements engineer ing patterns. Proceedings of the 2012 International Workshop on Empirical Re quirements Engineering (EmpiRE), 41–47. https://doi.org/10.1109/EmpiRE. 2012.6347679
Buschmann, F., Henney, K., & Schmidt, D. C. (2007). Pattern-oriented software archi tecture: Volume 5. Wiley.
Buschmann, F., Meunier, R., Rohnert, H., Sommerlad, P., & Stal, M. (1996). Pattern oriented software architecture- volume 1: A system of patterns. Wiley Publishing.
Cai, Z., Liu, Y., Gan, Y., Li, J., & Feng, Y. (2019). Design and implementation of online mall system based on java web. International Journal of Performability Engineer ing, 15(12), 3237–3244.
Chen, Z., Yang, L., Wu, J., & Yang, F. (2023). A multi-threaded virtual dom difference method based on web worker. Proceedings of the Sixth International Conference on Computer Information Science and Application Technology, 12800, 1280018. https://doi.org/10.1117/12.3003797
Documentation,N.(2023).Incrementalstaticregeneration[Availableat:https://nextjs.org/docs/basic features/data-fetching/incremental-static-regeneration].
Facebook. (2013). React: A javascript library for building user interfaces. Facebook Open Source. https://reactjs.org/
Gamma, E., Helm, R., Johnson, R., & Vlissides, J. (1995). Design patterns: Elements of reusable object-oriented software. Pearson Education India.
Gong, Y., Zhang, W., & Li, M. (2020). The architecture of micro-services and the sep aration of front-end and back-end applied in a campus information system. 2020 IEEE 5th International Conference on Cloud Computing and Big Data Analytics (ICCCBDA), 123–128. https://doi.org/10.1109/ICCCBDA49378.2020.9095621
Gupta, P., & Mehrotra, D. (2022). Objective assessment in java programming language using rubrics. Journal of Information Technology Education: Innovations in Prac tice, 21, 85–97.
Harris, R. (2019). Svelte: Cybernetically enhanced web apps. Svelte. https://svelte.dev/
Harrison, N. B. (1999). The language of shepherding. In Pattern languages of program design (pp. 507–530, Vol. 5). Addison-Wesley.
Hevery, M. (2010). Angularjs: Superheroic javascript mvw framework. Google Develop ers. https://angularjs.org/
Heyer,R.,Platenius-Mohr, M., vonDetten, M., Gerth, C., & Engels, G. (2019). Onthe(un )adoption of javascript front-end frameworks. Software: Practice and Experience, 49(11), 1689–1706. https://doi.org/10.1002/spe.3044
Iba, T. (2014). Ajourney onthewaytopatternwriting: Designing thepattern writing sheet [Available at: https://hillside.net/plop/2014/papers.html]. Proceedings of the 21st Conference on Pattern Languages of Programs (PLoP 2014).
Ireno, D. R. New possibilities for factory design pattern [Cited by: 0]. In: Cited by: 0. 2014, 487–494. https://www.scopus.com/inward/record.uri?eid=2-s2.0 84905717721&partnerID=40&md5=a1bd13817ecd7c6961e680ce25f6f91f
Jen, F.-L., Huang, X., Liu, X., & Jiao, J. (2024). Can generative ai really empower teach ers’professionalpractices?comparativestudyonhuman-tailoredandgenai-designed reading comprehension learning materials. Proceedings of the International Con ference on Technology in Education (ICTE 2024), 112–123. https://doi.org/10. 1007/978-981-96-0205-6_8
Keshari, P., Maurya, P., Kumar, P., & Katiyar, A. (2023). Web development using reac tjs. 2023 5th International Conference on Advances in Computing, Communica tion Control and Networking (ICAC3N), 1571–1575. https://doi.org/10.1109/ ICAC3N60023.2023.10541743
Kirichek, G., Skrupsky, S., Tiahunova, M., & Timenko, A. (2020). Implementation of web system optimization method. Proceedings of The Third International Workshop on Computer Modeling and Intelligent Systems (CMIS-2020), 2608, 112–121. http: //ceur-ws.org/Vol-2608/paper16.pdf
Kiyokawa, K., & Jin, Q. (2022). A front-end framework selection assistance system with customizable quantification indicators based on analysis of repository and com munity data. Big-Data-Analytics in Astronomy, Science, and Engineering, 41–55. https://doi.org/10.1007/978-3-030-96600-3_4
Kumar, S., Singh, A., & Sharma, P. (2023). Analyzing the difference between reactjs and angularjs. 2023 International Conference on Computing, Communication, and In telligent Systems (ICCCIS), 1–5. https://doi.org/10.1109/ICCCIS57949.2023. 10141276
Lazuardy, M. F. S., & Anggraini, D. (2022). Modern front end web architectures with re act.js and next.js. Research Journal of Advanced Engineering Science, 7(1), 132 141.
Li, J., Jangamreddy, N. K., Hisamoto, R., Bhansali, R., Dyda, A., Zaphir, L., & Glencross, M.(2024). Ai-assisted marking: Functionality and limitations of chatgpt in written assessment evaluation. Australasian Journal of Educational Technology, 40(4), 56–72. https://doi.org/10.14742/ajet.9463
Martens, K. S. R. (2018). Rubrics in program evaluation. Evaluation Journal of Australa sia, 18(2), 74–85.
McKenzie, S., &Wood-Bradley,G.(2014). Usingrubrics in it: Experiences of assessment and feedback at deakin university. Proceedings of IEEE International Conference on Teaching, Assessment and Learning for Engineering: Learning for the Future Now (TALE), 209–214.
Mohammed, A. B., & Naim, A. (2023). A rubric-based assessment plan for continuous improvement in accreditation and quality-educational systems. IGI Global.
Ollila, R., Mäkitalo, N., & Mikkonen, T. (2022). Modern web frameworks: A comparison of rendering performance. Journal of Web Engineering, 21(3), 789–814. https: //doi.org/10.13052/jwe1540-9589.21311
Orbaiceta, Á. S. (2024). Build a frontend web framework. Manning Publications.
Pavlenko, A., Askarbekuly, N., Megha, S., & Mazzara, M. (2020). Micro-frontends: Ap plication of microservices to web front-ends. Journal of Internet Services and In formation Security, 10(2), 49–66. https://doi.org/10.22667/JISIS.2020.05.31.049
Ragupathi, K., & Lee, A. (2020). Beyond fairness and consistency in grading: The role of rubrics in higher education. Diversity and Inclusion in Global Higher Education: Lessons from Across Asia.
Rathinam, S. (2023). Analysis and comparison of different frontend frameworks. Appli cations and Techniques in Information Security (ATIS 2022), 243–257. https://doi. org/10.1007/978-981-99-2264-2_19
Richards, M.(2015). Software architecture patterns. O’Reilly Media. https://www.oreilly. com/library/view/software-architecture-patterns/9781491924242/
Seidel, N. (2017). Empirical evaluation methods for pattern languages: Sketches, classi fication, and network analysis. Proceedings of the 22nd European Conference on Pattern Languages of Programs (EuroPLoP). https://doi.org/10.1145/3147704. 3147719
Sevencan, C. (2024). Optimizing web delivery: The impact of rendering methods on user experienceacrossnetworkconditions[Master’sthesis,CaliforniaPolytechnicState University, San Luis Obispo].
Sianandar, J., & Kerthyayana Manuaba, I. B. Performance analysis of hooks functionality in react and vue frameworks [Cited by: 1]. In: Cited by: 1. 2022, 139–143. https: //doi.org/10.1109/ICIMTech55957.2022.9915183
Singh, P., Srivastava, M., Kansal, M., Singh, A. P., Chauhan, A., & Gaur, A. (2023). A comparative analysis of modern frontend frameworks for building large-scale web applications. 2023 International Conference on Disruptive Technologies (ICDT), 531–535.
Singpant, P., & Prompoon, N. Constructing patterns verification criteria based on quality attributes: Web security context patterns case study [Cited by: 1]. In: Cited by: 1. 2016. https://doi.org/10.1109/ICIS.2016.7550839
SolidJS Team. (2024). Solidjs- simple and performant reactivity for building user inter faces [Accessed: 2024-01-25]. https://www.solidjs.com/
Sotnik, S., Shakurova, T., & Lyashenko, V. (2023). Development features of web appli cations. International Journal of Academic and Applied Research.
Stanley, D., Coman, S., Murdoch, D., & Stanley, K. (2020). Writing exceptional (spe cific, student and criterion-focused) rubrics for nursing studies. Nurse Education in Practice, 47, 102855.
Taylor, B., Kisby, F., & Reedy, A. (2024). Rubrics in higher education: An exploration of undergraduate students’understanding and perspectives. Assessment and Evalu ation in Higher Education.
Tong, J., Jikson, R. R., & Gunawan, A. A. S. (2023). Comparative performance anal ysis of javascript frontend web frameworks. 2023 3rd International Conference on Electronic and Electrical Engineering and Intelligent System (ICE3IS), 81–86. https://doi.org/10.1109/ICE3IS.2023.10335250
Vepsäläinen, J., Hevery, M., & Vuorimaa, P. (2024). Resumability: A new primitive for developing web applications. IEEE Access, 12, 9038–9046. https://doi.org/10. 1109/ACCESS.2024.1234567
W3C. (2015). Document object model (dom) level 3 specification. https://www.w3.org/ DOM/
W3Techs. (2024, November). Historical yearly trends in the usage statistics of javascript libraries for websites [Available: https://w3techs.com/technologies/history_ overview/javascript_library/all/y].
Wang, L., & Zhang, W. (2021). Research on mobile data model system for optimizing the performance of web front-end. 2021 IEEE 6th International Conference on Big Data Analytics (ICBDA), 456–460. https://doi.org/10.1109/ICBDA51961.2021. 9450651
Wehner, N., Amir, M., Seufert, M., Schatz, R., & Hoßfeld, T. (2022). A vital improve ment? relating google’s core web vitals to actual web qoe. 2022 14th international conference on quality of multimedia experience (QoMEX), 1–6.
Xing, Y., Huang, J., & Lai, Y. (2019). Research and analysis of the front-end frameworks and libraries in e-business development. Proceedings of the 2019 11th Interna tional Conference on Computer and Automation Engineering, 62–66. https://doi. org/10.1145/3313991.3314021
You, E. (2014). Vue.js: The progressive javascript framework. Vue.js. https://vuejs.org/
Zhang, Y., Li, X., & Wang, J. (2022). Comparative performance analysis of javascript frontend web frameworks. 2022 IEEE 46th Annual Computers, Software, and Ap plications Conference(COMPSAC),1234–1240.https://doi.org/10.1109/COMPSAC54236. 2022.00123 |
| Description: | 碩士
國立政治大學
數位內容碩士學位學程
112462013 |
| Source URI: | http://thesis.lib.nccu.edu.tw/record/#G0112462013 |
| Data Type: | thesis |
| Appears in Collections: | [數位內容碩士學位學程] 學位論文
|
Files in This Item:
| File |
Description |
Size | Format | |
|---|
| 201301.pdf | | 6182Kb | Adobe PDF | 0 | View/Open |
|
All items in 政大典藏 are protected by copyright, with all rights reserved.
|
