网站建设 功能需求,泉州seo网站关键词优,怎么做cpa网站,网络推广的方法和途径现代前端开发简介 前端开发的历史CGIServer PageRIAAJAX前端组件化和工程化 现代前端开发模式前端工程化前端组件化单页应用微前端 更多相关技术游戏开发Web Assembly 小结 今天我们来稍微聊一下现代前端开发的过去和现状。 前端开发的历史
CGI
在互联网刚刚开始兴起的时代静态的html网页功能实在有限前端脚本javascript 也不过是用于表单输入验证这样的简单功能。开发者想在网站上开发强大的功能就得使用动态生成的网页。 公共网关接口Common Gateway InterfaceCGI就是早期动态网页的简单实现基本原理就是让服务器不仅仅提供静态的html文件而且可以根据输入参数用程序生成结果简单直接有效。
Server Page
随着互联网的发展需要的网站功能越来越强对应的动态网页也就越来越复杂。这时候“Xxx server page” 这样的技术应运而生其主要特点是把后端脚本嵌入到html页面代码中来生成动态网页其实说白了就是一个语法糖让生成动态网页的代码更直观容易理解。其中最有代表性的有
JSP, 全称java server page, J2EE的最基础功能之一, Java 在互联网和企业级应用开疆扩土的功臣可以运行在tomcat 或者jetty这样的java web容器之上。ASP全称active server page, 是微软推出的技术运行于微软的IIS服务器之上。PHP被人戏称为“世界上最好的编程语言”至今还顽强的生存着。
RIA
动态生成的网页从后端来看可以动态填充数据已经不错了但前端表现力和灵活性未免差了一些。为了提高用户体验和绕开当时笨拙缓慢的javascript脚本人们发明了RIARich Internet Applications富互联网程序做法就是人工给浏览器安装RIA 运行时插件扩展浏览器的功能以运行RIA的程序。记得当时听说过的实现有
Flash / Flex, 这个是n年前处于统治地位的插件地表最强没有之一Java Applet / FxJava applet 曾经是早期的java流行的原因之一但终究未成气候。后来晚些时候又推出了 java Fx但反响并不强烈。SilverLight既然是软件技术竞争又怎么可能少了微软这个SilverLight就是微软晚些时候推出来的和Flex, Java Fx竞争的。
虽然上述技术曾经是打得你来我往甚是热闹但架不住技术大潮的方向没有选择RIA比如业界领军的苹果当年就坚持不支持flash。覆巢之下岂有完卵曾经热门的技术终究逐渐销声匿迹了。
AJAX
xxx server page的技术虽然兴盛一时但混合前后端代码的开发方式确实有些混乱和不直观。我们都知道解耦合和分层是软件设计中降低复杂度增加可读性的基本操作方法。在这里仍然适用。有一种名为AJAX Asynchronous JavaScript and XML的技术静悄悄地发展。在 AJAX 中JavaScript 代码向服务器发起请求但不会令浏览器刷新页面也不会改变网页。这种技术可以实现异步更新网页的部分内容而不需要重新加载整个页面从而提高用户体验。 直到后来行业巨头谷歌用它打造了前后端分离模式下的Gmail和google doc这项技术一下子火爆起来。然后就有了老前端们所熟知的JQuery。个人感觉JQuery的名字可能就来自于它的核心功能之一封装了AJAX调用功能。
前端组件化和工程化
AJAX火了数年期间前端也变得越来越复杂面临越来越多的挑战。再后来就出现了我们现在所熟知解决方案前端组件化和工程化。下面我们会介绍一下现代前端开发的模式。
现代前端开发模式
前端工程化
随着前端复杂度的提升传统写javascript 脚本和css的模式开发难度逐渐加大难以为继然后就出现了前端开发工程化的趋势。 前端开发工程化是指将前端开发过程中的一系列流程和工具进行规范和自动化从而提高开发效率、减少重复劳动、降低出错率。其核心概念包括模块化、打包构建、自动化部署、自动化测试和持续集成等。旨在提高开发过程中的开发效率减少不必要的重复工作时间让开发人员更加专注于业务逻辑的开发。 前端开发工程化的主要实现方式有
脚手架项目模板化的于快速搭建项目基础的工具它可以通过简单的指令或命令来生成项目的基础代码和配置从而避免重复编写相同的代码框架和基础配置。工具集用于前端开发编译部署等生命周期中的各种工具软件
那么工程化具体的功能有哪些呢
模块化: import,项目配置package.json, lock文件IDE工具集VScode及其插件构建检查(lint), 编译(Babel), 打包(webpack, vite)测试单元测试(如Jest), 集成测试(如Cypress)CICD: 如Jenkins监控告警如google firebase, Sentry
前端组件化
前端组件化其实是解耦合封装内聚复用代码等编程思想的一种有效的实现的方法。而具体实践则是由React, Vue为代表的框架来实现。甚至还出现了浏览器原生的组件化标准即web components但它一直不温不火的 组件化的流行还带来了如下小趋势
JSX 使用类似HTML/XML的方式来编写组件JSX虽然只是语法糖但却是改变前端开发思维方式的重要一步更直观的代码大大平缓了学习曲线。CSS In JS既然是组件自然会有将界面逻辑和界面样式都封装到一个组件的需求。Styled Component等CSS in JS的方案使得外观和逻辑代码可以轻松结合在一起封装成组件。Theme: 现代UI组件库往往提供自定义Theme和切换Theme的能力。使得我们可以在组件外观绑定的同时给予UI风格一致的灵活性。
单页应用
SPA即single page application是最典型的React/Vue组织前端页面的方法即整个前端应用其实是一个页面里面页面切换使用前端路由浏览器层面并未发生真正的页面跳转。使得应用能够与用户交互无需重新加载整个页面代码逻辑也是一个整体更像一个应用程序而不是分散的网页。 前端路由本质是对 url 的 hash 值进行改变和监听通过切换对应页面组件的 dom 结构来实现多个页面的效果。前端路由可以将不同的路由对应到不同的内容或页面使得页面不刷新提高用户体验也是实现SPA的基石。
##前端适配 现代前端以及不仅仅指狭义的网页开发了往往要兼容和适配多不同终端
多种运行时 浏览器原生App(iOS, Android鸿蒙APP内嵌Web View兼容性APP(Flutter)小程序(微信京东支付宝…) 多种设备 电脑平板手机其他可穿戴或者嵌入式设备
微前端
微前端是一种发挥着 多个团队通过独立发布功能的方式来共同构建现代化 web应用的技术手段及方法策略。 微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用这样才能确保微应用真正具备独立开发、独立运行的能力。
更多相关技术
游戏开发
除了上面介绍的经典前端应用外其实游戏也是一个很有价值的方向。
WebGL全写Web Graphics Library是一种3D绘图协议这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起在浏览器中运行。WebGL的出现大大拓展了前端绘图能力使得在浏览器小程序或web view中3D绘图变得可行而且速度也不错这是web 游戏能够实现的根基。游戏引擎不少游戏引擎支持浏览器环境运行比如著名的Cocos轻量级的PixiJS以及曾经火爆的白鹤引擎白鹤是优秀的国产游戏引擎市场占有率非常高但后来大概是因经营原因停止更新了很可惜
Web Assembly
如果我不想用javascript 或者typescript怎么办试试Web Assembly吧。 WebAssembly是一种运行在现代网络浏览器中的新型代码并且提供新的性能特性和效果。它设计的目的不是为了手写代码而是为诸如 C、C和Rust等低级源语言提供一个高效的编译目标。 因为它的安全性隔离性以及语言无关性Wasm 运行时可以以近似原生性能安全地隔离和执行用户空间代码所以Web Assembly也可以用在其他需要沙箱机制的地方比如Envoy Proxy 就率先使用 Wasm 作为扩展机制作为对数据平面的编程。
小结
本文大概介绍了前端开发的前生今世希望能对不熟悉的人和新手前端有所帮助。任何意见和建议都欢迎留言讨论。
