精华内容
下载资源
问答
  • 前言:希望像做游戏一样做 Web开发的 dexteryy同学今天在GMTC技术大会上又搞了一场「跨年演讲」(内容超多的意思),不但现场爆满、超时严重,而且一如既往的讲完之后只要把讲...

    前言:希望像做游戏一样做 Web 开发的 dexteryy 同学今天在 GMTC 技术大会上又搞了一场「跨年演讲」(内容超多的意思),不但现场爆满、超时严重,而且一如既往的讲完之后只要把讲稿和幻灯片拼起来就能发出来,大家可按需取用。

    亮点:为了方便大家理解,dexteryy 同学为这次分享画了 90 张图(工具是 Keynote),其实在内部版《Modern Web Stack》里有 120 多张图…

    大家好,我是来自字节跳动 Web Infra 部门的杨扬。在开始分享前先解释下:


    可以看到幻灯片上的标题,跟会议日程里的标题有些不一样,「现代 Web 开发」这几个字加上了引号,做这个修改是因为,原文很容易被断句成「现代的,Web 开发实践」,「现代」看上去只是一个普通的形容词,其实「现代 Web 开发」是作为一个整体的专有名词,来代指现在全球技术社区和全行业里,越来越重要的一个「大趋势」(Megatrend)、一场正在进行中的「范式转移」。

    今天这场分享的主题,就是字节跳动如何把「现代 Web 开发」转化成具体的技术栈和研发工具体系,在内部广泛落地和从中获益。

    这次分享的内容可以分成三个部分。

    第一部分,先整体回顾「传统 Web 开发」范式中的「前端开发」技术和工程体系,有哪些瓶颈问题。

    第二部分,对于在这些问题的背后、在这些问题的驱动下,正在发生的转变,做一下归纳和比较。

    第三部分,介绍字节跳动在落地和推动这种转变中,发展和建设出的技术体系。对于字节这个「App 工厂」来说,这种发展相当于一场「引擎升级」的过程。

    大家都知道字节跳动在业界有一个既含贬义也含褒义的外号,叫作「App 工厂」,如果我们从软件研发的角度来看待这个外号,那其实在字节内部,各种产品、工具、软件应用的开发,比大家从外部看到的更像「App 工厂」:无论数量还是多样性,形态和场景的丰富度,都是非常高、海量的。

    而这些软件项目中,基于 Web 技术、前端技术的,占了大部分(这并不是因为字节有特殊的技术选型,而是行业的大背景和必然规律,我在19年一次关于「现代 Web 开发」的分享里有介绍过)。

    由于字节有这种特点,所以前端技术和工程体系中的问题和瓶颈,在字节会体现的很全面、很典型,很多时候也会体现的更明显。

    * 现代 Web 开发的现状与未来:https://zhuanlan.zhihu.com/p/88616149

    传统的前端技术体系,无论在字节内部,还是在全行业,都可以总结为图上这个样子。

    图中从下到上,代表抽象层从底层到顶层。最右边三个方块,都从最下面延伸到了最上面,代表它们都是端到端的解决方案,跟左边的体系,以及彼此之间,都是割裂的,包含大量重复,这次分享因为时间关系,不讲这几个部分。

    蓝色的方块都是代码层面的,绿色的方块都是平台层面的。

    这套体系是字节曾经的主流,是从业务中自然发展出来的,但随着这种发展趋于停滞,这套技术栈正在同样自然的演变成历史遗留的「祖传技术栈」,其中每个部分都有比较大的瓶颈问题。


    我们逐个看一下图里的每个问题域,首先是大家最熟悉的「前端脚手架」。


    不管哪种形式的脚手架,本质都是复制粘贴一堆样板代码,组成新的项目。

    虽然跟建筑行业使用的脚手架一样,都是在搭建过程中使用,用完就放到一边,只留下搭完的项目。但建筑脚手架拆掉之后留下的建筑,有一套不能动的钢筋混凝土骨架,而脚手架生成的前端项目,是混杂在一起的样板代码,虽然有文件结构,但可以随意修改,而且因为基建和示例代码混在一起,所以不仅是「可以改」,而且经常是「必须改」样板文件的内容和结构,才能完成真实项目的完整搭建。

    假设一个脚手架包含 A、B、C 三块功能,用这个脚手架创建出的三个项目,最初都是一样的,也都包含 A、B、C 功能。

    接下来,三个项目必然需要在脚手架的生成结果上,做各种增删改,可能是因为业务需求,也可能是因为技术沉淀和工程改进。时间长了之后,三个项目之间会差别非常大,如果要做统一的改进,或者把一个项目的沉淀和改进,应用到另一个项目里,都会很困难。有时甚至要推迟需求开发,先对这些项目做一轮统一的重构,但这也只能应付眼下,之后这些项目仍然会继续分裂和腐化。

    另一方面,脚手架本身也在迭代改进,但因为脚手架是一次性的,一用即抛,这些改进不能对原先创建的项目带来好处,引入这些改进的成本,跟从其他项目里引入改进的成本差不多。

    进一步看看脚手架中「项目模板」的问题。

    脚手架的必然结果,是需要各种项目模板。不但脚手架建设者需要提供多种模板,覆盖不同的需求,使用者也经常需要复制原有模板,修改成新的模板,比如产品的技术形态是 SPA 还是 MPA,都会产生不同的模板。

    图上每个方块,都代表一个真实存在的模板,可以看到这些模板中有大量重复、又不会完全相同的内容,升级维护模板、在模板之间同步技术沉淀,都有成本。很多模板会缺少更新,长期停滞,把成本留给搭建项目的人。

    如果从项目场景的角度出发来设计和维护模板,也有相同的问题。图中的方块是一些最基础、最典型的场景,和场景中的技术需求,可以看到,不同场景之间的技术需求,重合度很高。

    除了场景类型,一个项目还有很多类型维度,图中的每个方块,代表一种维度,比如按照图上的第三种维度,不同项目之间仅仅因为「组件库」和「设计系统」不同,就要设计和建设不同的模板。

    这些维度之间的排列组合,要么会导致模板进一步分裂和数量爆炸,每种模板的维护成本更高,应用场景更小,ROI 因此变低,更加倾向于停滞;要么会导致模板对很多维度中的需求,不做考虑,只覆盖小部分需求,对项目开发的支持,局限在比较低的水平。

    「传统技术栈」的第三个问题域,来自前端工程化建设中常见的对 Webpack 的「包装」。

    为了避免每个前端开发者都成为「Webpack 工程师」, 很多脚手架、工程化建设,都会对 Webpack 做图上这样的包装,在最上层,提供围绕编译构建的两个命令 dev 和 build,搞出不同「规范」的配置文件和插件机制。

    这种包装的第一个问题,是抽象程度很有限,配置 API 的设计也五花八门,体现不同的个人偏好和业务经验,这种配置虽然被称作「规范」,但在真实业务项目中存在感不高,业务项目还是要直接靠 Webpack 来解决很多问题,项目中包含很多 webpack 配置,脚手架模板也包含大量相关的样板代码,避免不了前面说的问题。

    图中这段话来自 Redux 作者 Dan 写的一篇文章,讲 JS 工具的配置 API 的设计,这段话就是在讲这方面的抽象和设计能带来巨大的影响,有很高的门槛,需要非常严肃专业的对待,这种工作也需要高度的集中,而不是交给「Webpack 工程师」们搞各种各样的「规范」。

    * The melting pot of JavaScript: https://increment.com/development/the-melting-pot-of-javascript/

    业务项目深度依赖 Webpack、包含很多 Webpack 配置,还带来另一个问题:

    JS 开发工具从去年开始又出现新一轮更新换代的征兆,有人把这种趋势称作 「JS 的第三纪元」,新范式的项目涌现,开始进入到日常业务的开发实践,很多场景下已经没有 Webpack。

    * The Third Age of JavaScript: https://www.swyx.io/writing/js-third-age

    图中右侧的 esbuild 和 swc 这样的构建工具,把编译、构建、打包、压缩等在 Webpack 里属于不同环节的部分,合并在一起,加上非 JS 的系统编程语言的帮助,大幅提升构建速度。另一方面,也能支持 ESM 优先的、不需要打包的构建场景。

    Snowpack、Vite 这样的工具,在此基础上实现了开发者体验(DX)优先的、不打包(Unbundled)的开发调试模式。

    这些工具和模式跟 Webpack 的设计有一些本质矛盾,目前已经被用于公共库的构建、业务项目的开发调试等真实场景里。

    基于 Webpack 包装的工程化建设,第三个问题是:对项目开发的工程支持只停留在比较低的水平,比如就像 dev 和 build 命令一样,局限于跟编译构建有关的环节。

    而随着行业和业务的发展,随着前端技术的发展,一个前端工程的完整需求,就像图中一样,会包含蓝色方块代表的整个研发链路的每个环节,以及每个环节下面,绿色方块代表的工程需求。这些都超出了 Webpack 的能力范围。

    刚才说的这个问题,其实也是传统前端工程化建设本身的问题。

    传统的工程化建设,就像图中文字说的,只能实现「代码层面」的基础建设,在创建项目的时候,做的事情大部分都属于「代码初始化」。

    现代的 web 工程和前端工程,越来越多的包含「代码层面」之外的「平台层面」。

    图中绿色方块代表的,是靠「代码层面」来实现工程需求,橙色方块代表的,是要靠「平台层面」才能更好实现的需求。

    第五个问题域是,很多前端开发场景,比如像字节内部的前端开发,都在统一收敛到 React 技术栈,但 React 本身也是有局限的。

    在 Web Infra 部门建立之前,字节内部的业务方向,比如今日头条和抖音,就已经在推进统一到 React 技术栈,目前字节的现代 Web 研发体系建设,也有意收敛和围绕着 React 来进行。

    选择 React 的原因可以归纳为图上这四个,其中,符合技术趋势,设计演进更快,走在最前面,这两点让 React 在基础建设中,在有基础建设团队支持的业务场景中,都具备很大的优势。

    图上高亮的这句话,很好的表达了 React 引领业界和社区发展的特点。

    刚才在选择 React 的原因里,还提到 React 庞大的生态红利或验证规模。图中可以看到,在比较贴近实际使用情况的依赖下载数据里,React 在绝对数量遥遥领先的情况下,增长势头也是更快的,React 生态下的 CRA、Next.js,单独拿出来都达到或接近其他非 React 技术的使用量。

    * https://www.npmtrends.com/@babel/preset-react-vs-@vue/cli-shared-utils-vs-next-vs-nuxt-vs-react-vs-react-scripts-vs-vue-vs-vue-loader-vs-vite

    这种生态和规模上的差距,在国内环境中也回避不了,国内 JS 开发者的数量差不多是全球的十分之一,所以单靠国内开发者,影响不了整个行业和技术社区的生态和基建,导致在业务支持和工程建设中,React 目前都无法取代。

    * 「全球的 JS 开发者已经上千万了」:https://zhuanlan.zhihu.com/p/111204309

    但在工程体系中只靠 React 自己是远远不够的,React 本身只解决视图层的问题,距离一个 Web 框架还缺很多东西,在框架层面上,React 是无偏见的,比如没有限制路由实现、组件类型、SSR 解决方案等,也没提供默认的配置和工具体系,跟一个真正框架的必备要素,是完全相反的。

    * Advancing the web framework ecosystem (Chrome Dev Summit 2019): https://youtu.be/QDljY2I1Pfw

    由于 Webpack、React 都不解决全链路的问题,缺乏框架级别的解决方案,很多前端项目会把目光转向发展时间更长、已经形成框架级别基建的服务器端框架领域,但这方面的 Node.js 框架,也有瓶颈问题。

    业界主流的 Node.js 框架 NestJS 的作者,在文档首页的设计理念部分,就指出 React、Vue、各种开发工具,都没有解决「应用架构」的问题,而 NestJS 就是要提供开箱即用的应用架构。

    传统的前端开发局限于视图层,跟完整的软件开发、产品开发相比,最缺的就是「应用架构」。

    * NestJS Philosophy: https://docs.nestjs.com/#philosophy

    但是 Node.js 框架能提供的,只是「服务器端应用架构」,是以服务器端开发为中心的。

    有些情况下,比如活动页面,客户端部分本来就很薄,谈不上「客户端应用架构」,但这种情况下的业务关注点仍然在客户端部分,如果基于有完整服务器端应用架构的 Node.js 框架去开发这种项目,对前端开发者来说有些偏离重点。

    在另一些情况下,客户端部分比较厚,这种情况下需要的「客户端应用架构」,就像图中右边的蓝色部分,跟左边代表「服务器端应用架构」的橙色部分,是完全不同的,如果使用 Node.js 框架,蓝色部分仍然需要自己摸索和搭建。

    不管什么软件架构,核心都是「分层」和「关注点分离」,完善的现代 Web 工程里,「服务器端应用架构」和「客户端应用架构」不会割裂,而是混为一体的。

    * The Clean Architecture: https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html

    除了架构,Node.js 框架也解决不了前面说的其他问题,同时还引入了图中右边的新问题:

    业务逻辑既分散割裂,同时又重复,导致项目变得「低内聚高耦合」。

    在「前后端分离」之后从「后端项目」里独立出来的「前端项目」,使用 Node.js 框架之后,又混入了很重的后端业务逻辑和研发需求。而 Node.js 框架随着发展,本质也越来越清楚:还是服务于专业服务器端开发的,降低不了前端开发者的服务器端开发门槛,这是一个最大的瓶颈。

    从这张图可以看到,包含服务器端部分的「前端项目」,并不是真正的「全栈」,只是包含了服务器端最上面的、很薄的一层,解决 Web 和 BFF 需求(注意这里说的 Web 是指处理 HTML 请求,而 BFF 这个词在国内有很多误用,实际上是专指面向特定 UI 的 API 服务)

    对于前端项目里的这些服务器端需求,用 Node.js 框架来开发,很多时候带来的问题比解决的问题更多。

    * The BFF Pattern (Backend for Frontend): An Introduction: https://blog.bitsrc.io/bff-pattern-backend-for-frontend-an-introduction-e4fa965128bf

    最后,看下最底层的 IaaS 和 PaaS 部分。

    传统云计算中的 IaaS 和 PaaS,就像图中的绿色部分,从最底层到最上层,有这样几层,最上面这层,有不同的平台和服务形态,传统上,前端项目跟后端项目一样,直接部署这一层上,比如字节内部后端技术栈的项目,都部署在被称作 TCE 的 PaaS 上,而前端技术栈的项目,以前也只能这样部署。

    * 《容器云在头条的落地和实践》:https://time.geekbang.org/dailylesson/detail/100016772

    但是在这种 PaaS 上或直接在 IaaS 上做部署和运维,对前端开发者来说,不但复杂低效,而且在很多前端部署需求上,没有获得任何支持。

    比如图中粉色部分中这些前端部署方面的通用需求。由于 IaaS 和 PaaS 都源自后端开发场景,是后端研发技术的平台化沉淀,设计和演进都天然的受到局限,对前端研发场景缺乏理解,就算理解,也无法在相同的基础设施里去兼顾这些前端部署需求。

    也就是说,多数前端项目和底层的 IaaS 和 PaaS 之间,存在一大片空白,也就是图中粉色的区域。

    在真实业务中,为了避免每个前端项目都直接跟 IaaS 和 PaaS 打交道,很多业务都会有意无意的做一些集中建设,填补这片空白。

    比如字节的一些 web app 项目,会由后端负责的 go server 来运行。

    很多有 SSR 需求的业务,会搞一个统一的 SSR server 项目,在开发各种前端仓库的时候,需要本地有 SSR server 的仓库,才能运行和调试这些前端项目。

    像这样的集中建设,要么把前端项目中的正常组成部分,放到了前端开发者无法掌控的地方;要么反复重复的建设出被业务需求扭曲的部署方案,难以沉淀和演进,最大化的提效。

    所以图中粉色这片区域的空缺,该由什么来填补,是传统前端技术栈里的一个大问题。

    回顾了「祖传技术栈」的这些问题,接下来我们看下在这些问题的驱动下,业界和技术社区里已经形成的趋势,这些趋势带来的发展和优势,也反过来,让前面说的这些问题变得更明显,更急需解决。

    这种趋势可以归纳为「传统 Web 开发」范式到「现代 Web 开发」范式的转变。我在图中这两次技术活动上,分别介绍过「现代 Web 开发」范式的起源、背景和发展状态,这里不再重复了。

    * 现代 Web 开发的现状与未来(JSDC 2019 演讲全文): 

    https://zhuanlan.zhihu.com/p/88616149

    * 理解现代 Web 开发(JSConf China 2017):

    https://youtu.be/515pkXWHgnE
    https://2017.jsconfchina.com/files/02-modern-web-dev-dexteryy.pdf

    这种转变,可以称得上是一场「范式转移」,原有的理解和习以为常的假设被打破,在原有的东西上小修小补解决不了问题,需要建一套新的东西,做出根本性的变化。

    图中左边蓝色部分是最能代表「传统 Web 开发」的一些技术栈和规范,右边橙色部分是在「现代 Web 开发」趋势下出现的技术栈和技术形态,接下来把它们展开看看包含哪些要素,就会看到左边的东西跟右边的东西,差别非常大。

    * 「范式转移」:https://wiki.mbalib.com/wiki/%E8%8C%83%E5%BC%8F%E8%BD%AC%E6%8D%A2

    Ruby on Rails 是「传统 Web 开发」范式的一个典型代表, 本质上是以服务器端开发为中心的、MVC 架构的「服务器端 Web 框架」,就像图上右边这样,产出网页和 API。

    网页部分需要的前端代码和工程化,一般包含在同一个仓库里,框架本身也会内置一些前端相关的工程化,经常会需要被专业全面的前端工程化替代掉。

    * The Asset Pipeline: https://guides.rubyonrails.org/asset_pipeline.html

    * Hotwire: https://github.com/hotwired/hotwire-rails

    「十二要素应用宣言」本质上是一种工程标准,是进入云计算时代之后,服务器端应用和工程项目中形成的规范,这套标准可以保证应用能很好的运行在「后端 PaaS」或其他的传统云计算平台上。 

    可以看到,在 Node.js 帮助下形成的前端工程规范,不管有没有服务器端代码,也都受到了这个规范很大影响。

    * The Twelve-Factors App: https://12factor.net/

    MERN 技术栈,是前端代码和工程,从其他技术栈的服务器端框架中「分离」出来之后,又融合相同技术栈的服务器端框架,形成的「全栈」开发方案。

    组成 MERN 的 4 个首字母,能体现这套技术栈的本质,也就是图上右边的 4 个组成要素,整体上还是以服务器端的研发方式、应用架构、平台基建为中心的。

    * MERN Stack: https://www.mongodb.com/mern-stack

    在「现代 Web 开发」趋势下,在国外被称作「JAMstack」的技术栈,变得越来越清晰和主流。它还有另一种命名建议是图中第二行的「SHAMstack」。

    这两个缩写的首字母组合虽然不同,但就像图中的推导结果,本质是一样的,都是由 4 个要素组成。

    * JAMstack: https://jamstack.org/

    * SHAMstack: https://css-tricks.com/jamstack-more-like-shamstack/

    * "Content Mesh": https://www.gatsbyjs.com/blog/2018-10-04-journey-to-the-content-mesh/

    再展开看这 4 个要素。

    跟刚才说的 MERN 技术栈比较,Serverless 模式和基建取代了 M 代表的传统后端基建;前端应用的构建产物 、 服务器端渲染、静态网站生成、前端程序中的 BFF、等等,取代了 E 代表的服务器端 Web 框架和服务器端代码。

    这种技术栈的项目仍然是「全栈」的 Web 项目,但变成以客户端研发方式、客户端应用架构为中心,看上去很像是纯静态的、纯前端的项目。

    * ooooops I guess we’re* full-stack developers now: https://css-tricks.com/ooooops-i-guess-were-full-stack-developers-now/

    还有人归纳了这种叫「STAR」的技术栈,本质上是图中右边这4个要素组成。

    同一个现代 Web 项目,可以同时符合 JAMstack 和 STAR,JAMstack 强调的是前后端架构和开发范式,STAR 强调的是专业的编程方式。

    特别要注意的是,STAR 其实体现了一个现代 Web 项目中的「前端工程化」,除了编译环节,也需要 Runtime 环节和代码编写环节的支持,除了视图层,也需要完整的应用架构和 Model 层的支持。

    * STAR Apps: A New Generation of Front-End Tooling for Development Workflow: https://css-tricks.com/star-apps-a-new-generation-of-front-end-tooling-for-development-workflows/

    在「现代 Web 开发」趋势下,国外技术社区里越来越多的提到 meta-framework,本质上是把 JAMstack 和 STAR 强调的部分加起来,用以客户端为中心的、包含更上层抽象的、通用的 Web 框架的形式,整体系统的满足这些需求,抽象、简化这里面的各种模式。

    在「现代 Web 开发」里,这种 meta-framework 是更合适的基础抽象层,取代了以脚手架和构建工具为代表的更原始的基础。

    「S 型曲线」是一种事物「发展成长规律」的表示方法,这张 JS 框架的 S 型曲线图,很好的表达了 meta-framework 在 JS 技术发展中的意义。

    在图中左侧的早期阶段,各种 UI 框架在行业和技术社区里不断涌现,包含各种各样的尝试和破坏性创新,随着发展,UI 框架不再是快速发展的前沿了,选择也不再那么多,技术发展逐渐稳定和收敛成了基于 React 做上层的整合和框架建设,这种框架变成了新的发展前沿,也产生了大量选择,同时作为更成熟的技术,以更快的速度被采纳使用,之后又逐渐稳定和收敛,形成主流技术。

    * React Distros and The Deployment Age of JavaScript Frameworks: https://www.swyx.io/react-distros/

    比较了「传统 Web 开发」和「现代 Web 开发」中的不同现象,最后我们来归纳和定义一下这两种范式的本质特征和组成要素。

    从框架和 UI 的角度来看,「传统 Web 开发」是以服务器端框架为中心来做全栈开发,客户端是围绕 HTML 和对象树的编程范式。

    「现代 Web 开发」是以新一代客户端框架为中心来做全栈开发,客户端同样围绕专业、通用的软件开发语言和编程范式。

    从架构的角度来看,「传统 Web 开发」中存在两套比较独立和欠缺融合的程序,「前后端分离」改善了分工协作,但对于分离出来的「前端技术栈的 Web 项目」,在架构和开发范式上没有真正实现「分离」,前端开发者需要跟服务器代码打交道。

    「现代 Web 开发」实现了在同一套程序里一体化开发,在开发、调试、运行、部署等环节都能做到「无服务器化」,让前端技术栈的开发者更容易成为真正的「产品开发者」。

    从抽象的角度来看,「传统 Web 开发」中前端部分的基础抽象是原始、初级的,比如脚手架、样板代码、基本的 Webpack 包装和 CLI 工具、React 和 JS 生态中的海量选择,很有「前端特色」,跟成熟的软件开发有显著差距。图中的 DX 是指开发者自身的效率,UX 是指开发出的应用的能力和质量,传统范式中的抽象太原始,导致 DX 和 UX 没法同时提升,提升其中一个,就会损害另一个。

    「现代 Web 开发」中有了一体化的、更成熟的、框架级别的基础抽象,能同时追求和确保 DX 和 UX 的最大化。

    * What Is DX? (Developer Experience): https://medium.com/swlh/what-is-dx-developer-experience-401a0e44a9d9

    * What is developer experience?: https://www.tiny.cloud/blog/developer-experience/

    从部署的角度来看,「传统 Web 开发」的项目,要么纯静态托管,要么作为服务器端应用来部署和运维。不同部署方式,会导致整个工程都不同,需要不同的脚手架模板。

    「现代 Web 开发」的项目有更多样强大的运行和部署方式,但在 meta-framework 的支持下,项目模板的变化变少了,申请有机会完全融合、收敛成一个模板,成为「Universal App」。

    * "SPR": https://vercel.com/blog/serverless-pre-rendering

    * "SSG": https://www.freecodecamp.org/news/static-site-generation-with-nextjs/

    * "ISG": https://www.smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/

    * "Micro Frontend": https://micro-frontends.org/

    最后,从平台角度来看,「传统 Web 开发」基于后端的云基础设施,由于代码层面缺乏抽象,客户端代码的复杂性容易停留在很基础的程度,有些时候会干脆直接改成 JSON 之类的配置。

    「现代 Web 开发」基于新一代 Serverless 平台。在 Serverless 的支持下,能实现以前难以实用化的云研发。由于代码层面有统一的、上层的抽象,在开发中能引入更多低代码模式。

    针对这些问题和趋势背景,字节在起步比较晚的 Web Infra 建设中,主动发展和建设了整套「现代 Web 技术栈」的研发体系,建立了「MWA」 —— 也就是「现代 Web 应用」—— 这种工程标准,形成了新一代「研发引擎」,支持了大量、多样的真实业务项目。

    之前第一部分里我们讲了前端的「传统技术栈」是图上这样子。

    可以看到「现代 Web 技术栈」的这张图,发生了非常大的变化,所以说这种转变是一场「范式转移」。

    有几个需要注意的变化是:

    图中绿色代表的平台化基建,占比超过蓝色代表的纯代码层面的基建。

    没有割裂,中间的研发平台建立在「前端云」之上,工程框架基于研发平台支持研发全链路,右边的工程方案跨越上中下三层,是指可以通过工程方案,定制左边这三层的需求。

    这套技术栈在字节内部,是一套被称作「Goofy」的研发体系,可以看到图中有多个名字里 Goofy 开头的产品,既可以整体使用获得更多高级能力,也可以单独使用,其中最早推出、应用最广泛的,就是最下层的「前端部署平台」,提供了 Serverless 的「前端云」模式,明天下午有一场分享是专门介绍这个部分的。

    这次分享以图中蓝色部分代表的代码层为主,这个部分的解决方案,形成了一套被称作 Jupiter 的研发框架。

    先通过视频演示直观的看一下。

    屏幕上的这个应用,是 Goofy 前端研发工作台的 SaaS 版。

    先在团队里创建一个工程项目。

    默认会推荐用这套基于 Jupiter 框架的、标准化的工程方案体系,这里选择了 符合前面提到的 MWA 工程标准的「MWA 工程方案」。

    后面会介绍这个工程方案非常强大,能力很多,但创建过程中需要做的配置很少,这里我们什么都不需要改就可以继续创建。

    可以看到除了初始化代码,也会一站式的完成各种底层平台的初始化和配置。

    刚创建出来的项目,已经是一个完备的工程,可以马上执行一次上线发布。

    可以看到发布成功了,点击自动生成的域名,可以看到 Jupiter 框架的初始运行效果。

    接下来看看开发环节。

    在一个开发任务里,进入「代码」面板,可以看到项目代码的可视化展示和低码编辑界面,这个界面显示之前,会先初始化任务专用的 Web IDE 研发环境。

    接下来直接进入 Web IDE。

    可以看到一个 MWA 工程的代码,是极简、轻量的,只要在 src 下默认导出一个 React 组件,就能得到完善的 web 应用,项目默认是零配置的,看不到 webpack.config.js 之类的工程配置和样板代码。

    接下来直接执行 dev esm 命令,可以看到瞬间就启动了调试命令,几乎没有编译耗时,就生成了开发环境的访问地址。

    接下来快速做一段前后端一体化的开发,可以看到我们在 api 目录下准备了一个 BFF 函数文件。

    可以在 web app 代码中直接导入这个函数文件,像普通函数一样调用。

    可以看到输入代码的过程中,我完全不关心代码风格问题,保存的时候,会自动生成规范的、符合最佳实践的代码。

    这里我写错了 API,会自动提示错误。

    这个 useLoader 是 Jupiter 框架的运行时 API,能支持一体化的 SSR。

    查看刚才打开的调试页面,可以看到修改的效果,这段文本实际上是通过 BFF API 获取到的,这个视频忘记录相关的演示。

    接下来回到工作台的低码编辑界面,可以看到 MWA 工程的配置状态。

    把服务器端渲染功能开启。

    回到 Web IDE,可以看到 package.json 里已经自动增加了相关的配置。

    打开调试页面,从 HTML 文件可以看到整个 UI,包括通过 BFF API 获取到的内容,都已经在提前渲染好了。

    可以看到这个 MWA 工程的代码虽然极简,但能力已经比很多代码复杂的传统前端工程都要更强。

    刚才演示中的工程项目,在传统前端开发里,是一个模糊、虚的概念,不止包含代码,还包括研发环境和各种平台上对应的注册和配置。

    在字节前端研发体系里,「工程」被实体化了,在研发平台上,「工程」是「看得见摸得着」的对象,可以创建和管理,在里面做所有研发相关工作,每个工程都包含全链路每个环节,和一体化的工作流。

    「工程」可以通过「工程方案」来一键创建,「工程方案」相当于「工程」的「模板」,取代了传统前端开发中的脚手架,而「工程方案」都有一个「工程类型」,这种类型相当于「模板的标准」。

    建立和维护工程标准,推进围绕这些标准的基建和技术生态,是 Web Infra 部门的工作重点之一。

    目前的建设已经基本完成了「工程类型」的收敛,形成了少量的、数量固定的「默认工程类型」,能支持体系中各平台的更多功能。Jupiter 框架实现了这些「工程类型」在代码层面的要求。

    每种「工程类型」,除了直接提供「默认工程方案」,也支持开发者创建属于这种类型的、自己的「业务工程方案」,能跟标准保持兼容和同步。

    以 MWA 为例,这是默认工程类型中唯一的 Web 项目类型,满足所有 Web 项目的开发需求,传统前端开发中的各种 Web 项目的模板,都被收敛成同一个「模板」。

    MWA 之所以能承担唯一 Web 项目类型的责任,是因为有 MWA 框架的支持,MWA 框架不但是前面说过的 meta-framework,而且在 JAMstack 技术栈的基础上继续发展,把微前端、传统 Web 开发范式中的 Node.js Web 框架、等等,抽象融合到了一起。

    这种融合不但不是简单的叠加,导致工程变得大而全、更重。反而通过抽象变得更轻量更简单,所以是 1+1<1,另一方面因为能一体化的考虑多种需求,能交付原本单个项目类型不好实现的功能,所以也是 1+1>2。

    目前收敛得到的默认工程类型,有图上这些,每种类型都覆盖一个在研发方式和工程需求上有本质差别的场景领域,解决这个场景下的工程标准问题。

    虽然工程类型要收敛,但业务工程方案的数量不做任何限制,比如图中是字节GIP 部门做的叫作 GHome 的内部研发门户,其中包含大量子平台,这些子平台之间有共通的业务逻辑和额外的工程要求。

    在这种情况下,可以基于 MWA 标准,定制出 GHome 子平台工程方案。

    图上右边还列举了其他一些业务工程方案。

    进一步介绍下 Jupiter 和 MWA 框架。

    一个最简单的 MWA 项目,可以只包含图上左边这样的两个文件,这样的MWA 已经有完善的工程能力,能马上做产品级的部署。图上右边列出了一部分能力。

    我们接下来对这个项目做些小调整,就能实现传统上需要很多配置和样板代码,或是需要不同脚手架才能实现的效果。

    这个项目当前是图中左上角这样的「单入口」模式,改成左下角这样的「多入口」结构,就自动变成了 MPA,自动得到了服务器端路由和多个 HTML。

    如果像右上角这样,把 landing-page 的 App.tsx 入口组件,换成 pages 目录,就可以启用约定式路由功能,基于文件路径自动得到客户端路由。

    如果像右下角这样增加 index.ts 和 head.html,可以启用高级的自定义能力,定制或掌控原本由框架自动处理的环节。

    之前的演示里,我们通过低码界面启用了 SSR 功能,其实也可以在代码里增加 Jupiter 配置文件,用代码来控制配置。

    一个 MWA 项目自带产品级的 web server,称作 Jupiter Server,项目自己就可以运行自己。

    第一方 Serverless 平台使用相同的 web server,但还能基于 MWA 标准来理解项目的代码,自动生成更复杂的多进程的集群化的系统。比如 SSR 部分会独立部署,业务开发者写出来的 app 代码,容易在 SSR 中出现异常报错或内存泄露,这时前面的 web server 会让应用自动降级,变成兜底的纯 CSR 模式,保证用户请求不会出错不会超时。

    要实现这种自动兜底,不但平台和框架的协同,也需要 MWA 提供的一体化 SSR 开发方式,用同一套 app 代码开发前后端业务逻辑,让业务逻辑始终支持 CSR,否则兜底就无效了。

    MWA 支持用一体化的方式,开发同一套 app 代码,在图上这三个环节中以不同模式运行,也支持根据业务需求,让 app 代码中的不同部分,在不同环节以不同模式运行。

    这种收敛后的开发方式,符合业界的一个发展趋势,就是让代码的运行尽可能「前置」,优先在编译时运行,剩余的才在服务器端 SSR 环节运行,最后剩下的才在浏览器里运行。

    比如可以像图上左边这样,app 整体做 SSR 或 SSG,把局部留到 CSR。

    也可以像图上中间这样,反过来,整体默认 CSR,允许对局部做 SSR 和 SSG。还可以进一步实现右边这样更复杂的效果。

    要实现前面说的 1+1 < 1,除了合适的抽象,MWA 框架也通过插件和微生成器等方式,把核心功能拆分出来,可以按需启用。可以像图上这样运行 new 命令,选择启用这两个功能,微生成器会自动重构项目代码,增加必要的依赖和配置。

    也可以在工作台的界面上,查看项目可选功能的开关状态,做修改调整。

    之前的演示里,我们提前开启过 Unbundled 开发模式功能,可以用 dev esm 命令取代默认的 dev 命令,耗时可以从几秒减少到1秒不到。

    * What is Unbundled Development: https://medium.com/habilelabs/snowpack-what-is-unbundled-development-8562205d0539

    这么快的编译速度,是因为背后已经完全没有 webpack,也不做任何打包,只用 esbuild 编译 ESM 模块,用自研的类似 Snowpack 和 Vite 的方案运行项目,也会自动从 Goofy PDN 平台上加载预编译的依赖包,进一步优化性能。

    之前的演示里,还开启了一体化 BFF 功能,可以在项目里写「BFF 函数」文件,这种函数文件可以实现任意的 REST API,同时自动生成一体化风格的客户端 SDK,通过 SDK 调用,就像调用普通文件里的函数。

    用这种一体化 API 调用 BFF,不但更直观、安全,也因为多了框架的抽象,框架可以自动做更多事情,比如在 SSR 中运行的时候,自动把 BFF 请求切换成内网方式。

    Serverless 平台也会自动对 BFF 做优化,做独立部署,BFF 和 Web 之间不会互相干扰。

    MWA 实现了图上这种「三位一体」应用,图上右边三种开发方式之间,可以无缝切换。

    比如可以从现代 Web 开发范式,切换成传统的 Node.js Web 应用。也可以把 MWA 项目中的 BFF 拆分成独立的纯 API 服务项目。一个纯 API 服务,也可以随时切换成包含 web 的 MWA 项目。

    这种能力有利于业务项目从传统 Web 开发范式向现代 Web 开发范式的转换。

    前面说的这种「三位一体」,实际上是 MWA 最重要的「Universal App」功能的一部分。

    「Universal JS」是指同一份 JS 代码既支持在浏览器端运行,也支持在服务器端运行。而「Universal App」是进一步发展,让同一份 app 代码,可以用图上中间这一排的方框代表的任意方式来运行,也支持同时部署多个不同运行方式的版本。

    比如一个静态网站切换成 SSR,或启用 SPR 的时候,不需要调研技术选型和考量成本收益,几乎什么都不用改。也可以随时退回原来的方式。

    比如为中后台项目同时提供 SaaS 版、桌面安装版和私有化部署版。

    比如让微前端子应用,既能在主应用里访问,也能独立访问。

    前面提到过 Node.js Web 框架只能提供「服务器端应用架构」,MWA 提供开箱即用的、符合现代 Web 开发范式、以客户端应用为中心、前后端一体化的应用架构,类似图上这样。

    可以用 createModel、useModel 这样的 API,轻易实现 React 开发中欠缺的 Model 层和 Controller 层。可以利用 Redux 的 FP 编程优势和生态红利,同时不需要关心创建和配置 store,如何组织和组装 reducer、action 等。

    前面说过,在抽象不足的情况下,前端开发中一直存在 DX 和 UX 不可兼得的问题,比如如果降低了开发成本,产品功能上可能会不灵活,性能不够好,反之把业务需求和性能做到位,开发体验就会很差。

    MWA 框架在尽可能多的环节,实现最大化的抽象,类似图上这样,帮助前端开发者脱离「软件开发的石器时代」,获得更成熟的软件开发范式。

    Jupiter 和 MWA 框架在字节内部,经历了半年的内测,和一年的正式使用,在内部已经进入推广普及阶段。

    这个项目也很快会开源出来,帮助行业和社区里的更多项目,落地「现代 Web 开发」范式。

    这个开源项目叫作 Modern.js,目前我们已经创建了 Github 项目,上线了开源内测主页,和一个现代 Web 开发者问卷调查,希望大家帮忙填写和转发下这个问卷,调查报告之后会公开出来。

    (由于 modernjs.dev 这个域名还没备案,没办法部署在我们自己的 Serverless 平台上,目前是用 Github Pages 部署,似乎有被墙的问题,正在解决)

    * https://modernjs.dev/

    * https://github.com/modern-js-dev/modern.js

    * https://webinfra.org/


    内推社群

    我组建了一个氛围特别好的腾讯内推社群,如果你对加入腾讯感兴趣的话(后续有计划也可以),我们可以一起进行面试相关的答疑、聊聊面试的故事、并且在你准备好的时候随时帮你内推。下方加 winty 好友回复「面试」即可。

    展开全文
  • web前端开发技术实验报告 实验三.doc (5页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!11.90 积分 长 春 大 学 20 15 — 2016学年第 二 学期 Web前端开发技术 课程...

    a7f4a3f590493a1e451dd952a488fd7c.gif web前端开发技术实验报告 实验三.doc

    (5页)

    1ee005847f9b5b5f090b71cafce80a9e.gif

    本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!

    11.90 积分

     长 春 大 学 20 15 — 2016学年第 二 学期 Web前端开发技术 课程实 验 报 告学 院: 计算机科学技术专 业: 软件工程 班 级: 软件15402 学 号: 041440210 姓 名: 王 悦 任课教师: 车 娜 实验三 CSS网页布局一、实验目的1.掌握CSS盒子模型的概念,能够灵活运用盒子模型布局页面;2.掌握盒子模型相关属性,能够使用它们熟练地控制网页元素;3.理解块元素与行内元素的区别,能够对它们进行转换。二、内容及要求运用盒子模型的相关属性实现网页弹出框效果,满足如下要求:1.网页弹出框由上面的标题和下面的宣传内容两部分组成;2.标题通过h2定义;3.在段落文本中内容部分由h3和p标记进行定义;4.应用标记、标记、边框属性、背景属性等设计页面结构效果。三、实验原理盒子模型:把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。标记:是一个区块容器标记,可以将网页分割为独立的、不同的部分,以实现网页的规划和布局。边框属性:使用border-style、border-width、border-color等属性可以实现丰富的边框效果。padding属性:设置内边距,即元素内容与边框之间的距离,也常常称为内填充。margin属性:设置外边距,即元素边框与相邻元素之间的距离。background-color:设置网页元素的背景颜色,默认值为transparent,即背景透明,这时子元素会显示其父元素的背景。background-image属性:将图像作为网页元素的背景。标记:行内元素。与之间只能包含文本和各种行内标记,如加粗标记、倾斜标记等,中还可以嵌套多层。四、实验步骤1、结构分析宣传页面包含图片、标题及段落等。2、样式分析宣传页面中应用了CSS样式表、用了设置盒子模型。3、制作页面结构使用background-image背景属性插入图片。使用、标记和标记分别设置标题和段落文本。用了标签设置了一个盒子。用了标签加粗字体。还用了标签,整体控制小盒子。4、定义CSS样式在css样式表中应用了width和height设置了盒子的大小,用了margin和padding设置了外边距和内边距。在css样式表中还对标签中的设置了大小、字体、颜色以及背景。五、实验代码及网页效果图1.搭建基本结构关键代码如下:正在播放《不完美小孩-TFBOYS》 不完美小孩演唱:TFBOYS千:当我的笑灿烂像阳光 当我的梦做得更漂亮 全世界在为我鼓掌 只有你担心我受伤源:全世界在等我飞更高 你却在心疼我小小翅膀 为我撑起沿途熟悉的地方 凯:当我必须像个完美的小孩 满足所有的期待你却好像格外欣赏 我犯错犯傻的模样 合: 我不完美的梦 你陪着我想 不完美小孩横划可切换效果如图3-1所示。图3-1 效果图2.定义CSS样式关键代码如下:*{margin:0;padding:0}.all{width:350px; height:470px; border:#E1E1E1 solid 1px; margin:50px auto;}.one{line-height:40px; border-bottom:#E1E1E1 1px ; font-family:"微软雅黑";}.two{font-size:15px; font-family:"微软雅黑"; color:#FFF; background:url(2.jpg) no-repeat; text-align:center }span{display:inline-block; width:70px; height:60px;}.three{background:url(01.png) no-repeat}.four{font-size:10px; font-family:"微软雅黑"; color:#000;}.big{color:#3F9;}.small{font-size:18px}.five{background:url(02.png) no-repeat}.six{background:url(03.png) no-repeat}效果如图3-2所示。图3-2 效果图六、实验总结1.学会了如何运用标签定义盒子,并在css样式表中使用width,height,border等属性来设置盒子的大小、样式以及填充背景。并用margin和padding设置内外边距。2.在标签中编辑正文和标题,应用,和标签来分别设置标题,正文和段落。3.在标签中应用了标签,知道了“display:inline-block”是将标记转换为行内块元素,然后对其应用的宽度、高度及边框设置。5 关 键 词: 实验 技术 前端 报告 开发 web

    4d91c43bfc72ca913299809b07b4968f.gif  天天文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。

    展开全文
  • 长 春 大 学20 15 — 2016学年第 二 学期Web前端开发技术 课程实 验 报 告学 院: 计算机科学技术 专 业: 软件工程 班 级: 软件14402 学 号: 041440211 姓 名: 武嘉琪任课教师: 车 娜实验一 构建HTML页面一、...

    长 春 大 学

    20 15 — 2016学年第 二 学期

    Web前端开发技术 课程

    实 验 报 告

    学 院: 计算机科学技术 专 业: 软件工程 班 级: 软件14402 学 号: 041440211 姓 名: 武嘉琪

    任课教师: 车 娜

    实验一 构建HTML页面

    一、实验目的

    熟悉HTML制作网页的基础知识,并能熟练运用学过的内容制作、设计图文 混排的网页。

    二、内容及要求

    运用学过的代码设计一个图文混排网页,满足如下要求: 1.既有图像又有文字,并且呈左右排列。

    2.文字部分由标题和段落文本组成,它们的字体和字号不同。

    3.在段落文本中,段落前有2字符留白,一些文字以特殊的颜色加以突出显示。

    三、实验原理

    文本:font可以跟color、size、face等属性根据不同的值对文本进行修

    改;

    图片:img标记可以跟border、height、width、align、vspace、hspace

    等属性根据不同的值对滚动字进行设置; 其他相关内容:各级标签、标题设置、背景图等。

    四、实验步骤

    1、确立自己的网页主题

    选择传智博客设计学院作为本次网页设计的主题。

    2、网页基本设计

    (1) 应用h2标记设计标题样式。

    (2) 应用font标记及其face、size、color等属性设计文本字体样式。 (3) 应用p标记设计文本段落格式。

    (4) 应用img标记及其src、alt、align、hspace、height、width 等属性设计图片排版样式。

    五、实验代码及网页效果图

    1.搭建基本结构

    使用

    lhd_59mv87l8787b3ee98nfo_1.html标记插入图像。使用

    标记和

    标记分别设置标题和段 落文本。并对< img />标记应用align属性和hspace属性实现图像居左文 字居右、且图像和文字之间有一定距离的排列效果。

    关键代码如下:

    2

    logo.gif%5C%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E3%80%81%E5%B9%B3%E9%9D%A2%E8%AE%BE%E8%AE%A1%E3%80%81UI%E8%AE%BE%E8%AE%A1%5Calign=%5C<h2传智播客设计学院

    传智播客设计学院 效果如图1-1所示。

    图1-1 效果图

    2.设置文本样式和首行缩进效果

    使用文本样式标记控制标题和段落文本的样式。并通过color、size属性设置颜色和粗细。最后使用首行缩进两个字符实现留白效果。 关键代码如下:

    p

    展开全文
  • Web技术实验报告

    千次阅读 2021-05-05 12:32:34
    武汉理工大学,计算机学院,web技术实验报告。代码在github上。

    Web技术实验报告

    实验一

    第一部分:实验分析与设计(可加页)

    一、实验内容描述(问题域描述)

    1.1 实验内容
    (1)在个人电脑上搭建 Web 服务器环境,Web 服务器可以选用 IIS 或 Apache,Java Web 应用
    服务器选用 Tomcat,并完成 IIS 或 Apache 与 Tomcat 的集成,请记录配置的 步骤,以及配置成
    功后的截图。
    (2)设计一个用户信息输入页面,完成用户个人信息的填写,当用户提交表单时,通过 alert 显示
    用户的输入信息,界面设计如图 1 所示。
    要求:
    ⚫ 姓名中英文均可,长度不能超过 10 个字符
    ⚫ 身份证号码进行验证
    ⚫ 对邮箱格式进行验证
    ⚫书写自我介绍的时候,下面的已用字节和剩余字节随着输入内容的变化,而相应的 进行变
    化。
    (3)设计一个主页布局页面,界面设计如图 2 所示,页面主题可以自定要求
    i. 使用 div 进行页面布局 ,定义各个部分的 CSS 样式表,通过 id 或 class 属性将样 式
    作用于每一个 div,完成页面的布局。
    ii. 实现响应式布局,分为 4 种情况:
    a) 浏览器窗口大于 1000px , Left 占 300px 固定宽度,剩余宽度给 Body
    b)浏览器窗口小于 1000px,且大于 800px , Left 占 30%,剩余宽度给 body
    c) 浏览器窗口小于 800px,且大于 480px ,显示 1 列,宽度设为 auto,不浮动;
    d)浏览器窗口小于 480px,显示 1 列,并隐藏 Left
    1.2 实验目的
    (1) 掌握 Web 服务器环境的搭建
    (2) 掌握 HTML 静态网页设计与布局
    (3) 掌握 CSS 技术美化网页的方法
    (4) 掌握 JavaScript 技术控制网页的方法

    二、实验基本原理与设计(包括实验方案设计,实验手段的确定,试验步骤等,用硬件逻

    辑或者算法描述)
    2.1 配置 tomcat 服务器
    下载 tomcat10 服务器压缩包,解压到 D 盘。并修改配置文件,设置端口号为 8080,修改日志
    文件的编码为 GBK.
    2.2 设计用户输入表
    (1) 新建 html 文档,修改标题,引入 js 文件和 css 文件。
    (2) 使用 form 表单,form 表单中使用

    来控制布局。
    (3) 加入标签用来输入内容,设置并设置其 type 来设置输入的格式。
    (4) 加入标签作为文本区输入内容。
    (5) 通过 onchange 来监听输入区的变化,通过 document.getElementById("").value 来获得输入
    的内容。从而时刻监听。
    (6) 通过正则表达式来判断用户输入的内容是否符合规范。
    var emailreg = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+.([a-zA-Z]{2,4})$/;
    var cardidreg=/\d{15}|\d{18}/;
    用 test()来验证正则表达式。
    (7) 当点击提交时,使用 window.open()来打开一个窗口,用来提示用户信息。
    2.3 设置布局页面
    (1) 将页面划分四个区域,包括首部,左边导航,中间主体,尾部。
    (2) 设置各自的高度其中将左边导航设置宽度为 30%。
    (3) 添加页面响应样式。@media screen and (max-width: ***px)。根据屏幕的宽度来调整页面
    布局。三、主要仪器设备及耗材
    代码编辑器:notepad++.
    结果预览:谷歌浏览器。

    第二部分:实验调试与结果分析(可加页)

    一、调试过程(包括调试方法描述、实验数据记录,实验现象记录,实验过程发现的问题等)

    1.1 遇到的问题。
    (1) 单选框无法只能选中一个。
    (2) 屏幕宽度变化时,页面布局没用改变。
    1.2 调试过程,解决办法。
    (1) 单选框中两个标签要设置同样的 name 值。
    (2) 在@media screen and (max-width: 1000px)中,值要和 max-width 中间有一个空格。

    二、实验结果及分析(包括结果描述、实验现象分析、影响因素讨论、综合分析和结论等)

    2.1 Form 表单实验结果。
    (1) Form 表单的页面如图 3.
    (2) Form 表单不按照要求输入信息时的提示如图 4.
    (3) Form 表单文本输入区剩余输入字符数提示如图 5.
    (4) Form 表单提交时提示如图 6.
    图 3 图 4
    图 5 图 62.2 页面布局实验结果
    (1) 原界面如图 7.
    (2) 屏幕宽度小于 1000 时,界面如图 8.
    (3) 屏幕宽度小于 800 时,界面如图 9.
    (4) 屏幕宽度小于 450 时,界面如图 10.
    图 7 图 8

    图 9 图 10

    三、实验小结、建议及体会

    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    实验二

    第一部分:实验分析与设计(可加页)

    一、实验内容描述(问题域描述)

    1.1 实验内容
    (1) 在个人电脑上安装 MySQL 服务器,请记录配置的步骤,以及配置成功后的截图。在 MySQL
    数据库服务器中,创建一个新的数据库 qcdata,并且在里面新建一个 UserAccount 表,表中
    包含这些字段:编号(int),姓名(string),密码(string) ,性别(string) , 出生年月(date) 存款
    金额(float)。
    (2) 采用 JSP+Servlet+JavaBean 技术编写一个 Web 应用程序,实现用户的开户,编辑, 查询,
    销户。
    (3) 进一步实现用户的存款,取款和转账功能。(选做)
    要求:
    i. 界面风格自行设计,符合一般用户使用习惯
    ii. 界面实现响应式布局,适合 Pad 用户和手机用户使用
    1.2 实验目的
    (1) 掌握 Intelli J 集成开发平台。
    (2) 掌握 MySQL 数据库的安装和配置。
    (3) 掌握 JSP 编程技术。
    (4) 掌握 Servlet 编程技术。
    (5) 掌握 JavaBean 编程技术。
    (6) 理解 MVC 编程模式。

    二、实验基本原理与设计(包括实验方案设计,实验手段的确定,试验步骤等,用硬件逻 辑或者算法描述)

    2.1 前端控制层
    (1) 前端控制类添加@WebServlet(url)注解,表示此为 controller 类。用以处理 url 的网络请求。
    (2) 继承 HttpServlet 类,实现其中的 doGET()和 doPOST()方法,来处理前端的网络请求。
    (3) doGET()和 doPOST()方法将调用 service 中的类来完成数据处理。
    2.2 数据服务成。
    对数据进行处理,如数据的类型的转换,数据内容的判断等。并调用 dao 中类进行数据持久化。
    2.3 数据库接口层。
    (1) ComConfig 类为配置类,其中配置了连接 sqlserver 的相关参数。如账号,密码,驱动等。
    (2) 祖类 DaoBase 用于数据库连接。
    (3) UserDom 类为实体类,与数据库中的 UserAccount 表对应。
    (4) UserAccountDao 类进行执行 sql 语句。2.4 前端页面
    (1) Jsp 文件,通过 serrion 来获取当前用户的信息。
    (2) 使用 var xmlhttp=new XMLHttpRequest();来执行前后端通信。
    三、主要仪器设备及耗材
    开发工具:idea
    Web 服务器:tomcat
    数据库:sqlserver
    页面模板引擎:tomcat jsp-api
    架构:MVC
    Js 库:jquery

    第二部分:实验调试与结果分析(可加页)

    一、调试过程(包括调试方法描述、实验数据记录,实验现象记录,实验过程发现的问题等)

    1.1 遇到的问题
    (1) 无法解析 jsp。
    (2) 无法解释@WebServlet()。
    (3) @WebServlet()不起作用。
    (4) 无法加载 sqlserver 驱动。
    (5) 后端内容修改,但是前端无法更新。
    1.2 调试过程,解决方法
    (1) 引入 tomcat 文件夹下 lib 文件夹下的 jsp-api 库。
    (2) 引入 tomcat 文件夹下 lib 文件夹下的 servlet-api 库。
    (3) 引入 tomcat 支持。
    (4) 将 sqlserver 的驱动放置在 WRB-INF/lib 文件夹下,将其作为项目部署到 tomcat.
    [注]由于 sqljdbc42 在 tomcat 中部署存在的问题,当停止服务时,并不会 sqljdbc 并不会释
    放对数据库的连接,会持续报出多连接的警告,但是并不影响对数据库的使用。可通过主动
    配置连接池来管理或者降低 tomcat 版本。
    (5) 将 webapp 前端内容标注为资源文件。更改配置,当框架停用时更新资源。清楚浏览器缓存,
    当调试时,打开浏览器开发者工具,来防止页面记录。

    二、实验结果及分析(包括结果描述、实验现象分析、影响因素讨论、综合分析和结论等)

    2.1 登录界面结果如图 1.
    图 12.2 注册界面结果如图 2.
    图 2
    2.3 主页界面如图 3
    2.4 查询个人信息界面如图 4

    图 3 图 4
    2.5 修改个人信息界面如图 5 和图 6

    图 5 图 6
    2.7 取款的界面如图 7,取款成功的界面如图 8

    图 7 图 82.8 转账界面如图 9,转账成功后对方账户界面如图 10

    图 9 图 0

    三、实验小结、建议及体会

    vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

    实验三

    第一部分:实验分析与设计(可加页)

    一、实验内容描述(问题域描述)

    1.1 实验内容
    (1)采用 SSM 框架来实现实验二中的 Web 应用程序,实现用户的开户,编辑,查询, 销户。
    (2)进一步实现用户的存款,取款和转账功能。(选做)
    要求:
    i. 界面风格自行设计,符合一般用户使用习惯
    ii. 界面实现响应式布局,适合 Pad 用户和手机用户使用
    1.2 实验目的
    (1) 掌握 Spring 框架技术
    (2) 掌握 SpringMVC 技术
    (3) 掌握 Mybatis 技术

    二、实验基本原理与设计(包括实验方案设计,实验手段的确定,试验步骤等,用硬件逻 辑或者算法描述)

    2.1 配置 pom.xml 文件
    (1) 引入 thymeleaf 模板引擎用来解析前端页面。
    (2) 引入 com.microsoft.sqlserver 数据库驱动。
    (3) 引入 com.alibaba 用来封装 JSON,进行数据传输。
    (4) 引入 org.projectlombok 进行实体类自动注解。
    2.2 全局配置
    (1) 新建 application.yaml 文件。程序会自动扫描其中的配置。
    (2) 配置 spring 的 datasource。来配置数据库的驱动,地址,账号和参数。
    (3) 配置 thymeleaf 的路径和缓存。
    (4) Mybatis 扫描的 xml 文件和实体类包。
    (5) 配置@Configuration 类,用来自定义页面映射。
    2.3 前端控制层
    (1) 类之前添加@Controller 注解,标注此为 controller 类,用来处理网络请求。
    (2) 函数前@RequestMapping 注解,标注此函数用来处理该 url 的请求。
    (3) 通过@Autowired 自动注解来获得 Service 的服务。
    2.4 数据服务层。
    (1) 类之前标注@Service,标注此类为 service 类。
    (2) 通过@Autowired 自动注解,来获取 Mybatis 的 mapper 接口的服务。2.5 数据库接口层
    (1) 接口前添加@Mapper,标注此接口为 mapper 的接口,程序执行时,mybatis 会自动扫描此类,
    并与对应的 xml 文件绑定,执行 sql 语句。
    (2) Resource 文件夹下新建 mybatis/mapper 文件夹,里面防止 mapper 的 xml 文件,根据 2.2 的
    配置,mybatis 会扫描此 xml 文件,并执行其中的 sql 语句。
    2.6 前端
    (1) 使用 thymeleaf 来获取相关后端设置的相关参数。
    (2) 使用 var xmlhttp=new XMLHttpRequest();来执行前后端通信。

    三、主要仪器设备及耗材

    开发工具:idea
    后端框架:springboot
    Web 服务器:tomcat
    数据库:sqlserver
    数据库连接:mybatis
    页面模板引擎:thymeleaf
    架构:MVC
    Js 库:jquery
    项目托管:MAVEN

    第二部分:实验调试与结果分析(可加页)

    一、调试过程(包括调试方法描述、实验数据记录,实验现象记录,实验过程发现的问题等)

    1.1 遇到的问题
    (1) 前端页面无法更新。
    (2) 前端找不到访问的页面。
    1.2 调试过程,解决办法
    (1) 在 application.yaml 文件中配置 thymeleaf,关闭其缓存。
    (2) 自定义配置类,添加@Configuration 注解,标注此为配置类。添加接口 WebMvcConfigurer,
    实现其 addViewControllers(ViewControllerRegistry registry)函数,即可自定义页面映射。

    二、实验结果及分析(包括结果描述、实验现象分析、影响因素讨论、综合分析和结论等)

    2.1 登录界面如图 1,注册界面如图 2

    图 1 图 22.2 修改个人信息界面如图 3 和图 4

    图 3 图 4
    2.3 取款界面和取款成功界面如图 5 和图 6

    图 5 图 6
    2.4 转账界面如图 7,转账成功后对方账户界面如图 8

    图 7 图 8
    2.5 存款界面如图 9,存款成功界面如图 10

    图 9 图 10

    三、实验小结、建议及体会

    ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp

    展开全文
  • javaweb实训报告总结.doc

    千次阅读 2021-02-27 15:58:45
    javaweb实训报告总结javaweb实训报告总结【1】此次只实训了短短的三周。虽说时间很短,但其中的每一天都使我收获很大、受益匪浅,它不但极大地加深了我对一些理论知识的理解,不仅使我在理论上对Java有了全新的认识...
  • 前端组件化开发实践总结

    千次阅读 多人点赞 2021-10-13 12:46:52
    这篇文章就把我在开发总结的一些组件化开发经验分享一下。示例中的所有代码都是伪代码,你可以按照实际情况应用到 React 或 Vue 的项目中。 前端组件化发展历史 在讨论组件化开发之前,我们先看看前端组件化开发的...
  • JAVA WEB实训总结

    千次阅读 2020-12-24 13:48:08
    在实训生活中,我了解开发项目的需求、设计、实现、确认以及维护等活动整个过程,让自己开始懂得一点软件工程的知识点。首先,了解需求分析的重要性,比如:需求分析就是分析软件用户的需求是什么.如果投入...
  • 一.单选题(共14题,53.2分) 1 WWW上的任何信息(包括文档、图像、图片、视频或音频等)...A、 URL B、 ...C、 DNS ...正确答案: A 我的答案:A 得分: 3.8分 ...下列关于站点目录结构组织的描述正确的是( ) ...只在根目录下建立 Ima
  • web前端实习报告.doc

    千次阅读 2020-12-23 09:09:00
    web前端实习报告web前端实习报告Web前端技术实训》任务书一、实训课题名称1、 教育类网站的设计与制作 2、 商业类网站的设计与制作3、 旅游休闲类网站的设计与制作 4、 体育健身类网站的设计与制作二、 课题设计...
  • 南昌大学实验报告学生姓名:张志煋学号:7101011001 专业班级:网工121班实验类型:□验证□综合□设计□创新实验日期:2015-4-15 实验成绩:一、实验项目名称购物车项目二、实验目的通过完成购物车的项目,初步学会...
  • java web课程总结

    2021-03-22 18:40:24
    java web课程总结时间:2017/11/25 6:12:00java web课程总结是对自己学习到的java web知识进行一次总结,这样可以梳理自己思路,整理出哪些知识还没有掌握!以下是小编分享的java web课程总结范文,请阅读参考!java ...
  • Java Web实训总结

    千次阅读 2020-12-24 13:48:07
    在实训生活中,我了解开发项目的需求、设计、实现、确认以及维护等活动整个过程,让自己开始懂得一点软件工程的知识点。首先,了解需求分析的重要性,比如:需求分析就是分析软件用户的需求是什么.如果投入大量的...
  • 字符集的不同使日期型的显示有问题解决 alter session ... 总结 如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
  • PHP Web开发实用教程

    2021-04-08 09:01:12
    目录第1章PHP概述及其运行环境的配置11.1动态Web站点11.1.1什么是动态Web站点11.1.2从静态网站到动态网站的演变11.2PHP基本原理及由来21.2.1PHP概念21.2.2PHP的产生与发展21.2.3PHP原理31.3PHP的运行环境41.3.1PHP...
  • 网页制作课程设计报告总结.doc

    千次阅读 2021-06-14 02:06:37
    网页制作课程设计报告总结.doc引言课程设计是一块“试金石”,是加深对自我能力认识的重要途径。大学的学习基本上都是理论的接受,而缺少能力的熟练与加强,我们缺少的并不是知识的储备,而是能力的积蓄。但由于大学...
  • 项目总结报告

    2021-03-09 04:06:16
    在这个月里,我体验到了团队合作的经验,编程过程中的乐趣,以及将学习应用到实际、从实践中学习的丰收感。这一个月里,得到了二个最宝贵体验:一是参与了一个团队合作的、有很强多同模块相互性、和一套完整生命周期...
  • 在原生移动端,混合开发Web前端,小程序等方面有丰富的实战经验。 而且,大帅老师是掌上灵通2006手机FLASH游戏大赛冠军,曾经拿过2020DCloud插件开发大赛二,三等奖。 大帅老师还是社交游戏《开心农场》FLASH技术...
  • 给大家总结了几款优秀的类库,一定要收藏!1.CubicWebCubicWeb的最重要的功能是其代码的可重用性,由一个个代码单元组成。它灵活又强大,并且还有一些特别的功能,包括RQL查询语言和支持有效编码的语义视图功能。这...
  • web前端第一周总结

    2021-01-17 21:24:09
    第一周总结 web标准的三层结构:框架(HTML框架),表现(css外观样式),行为(javascript交互); 头代码含义: <!DOCTYPE html > <!-- 按照html 5 版本规范解析 --> <html lang="en"> <!-- ...
  • 本次实训课程顺利结束,现在来对课程大作业项目进行总结分析 本项目采用的是SpringBoot进行开发,数据库采用的是MySql,前端框架采用的layui,分别做了PC网页端和微信小程序移动端,整体项目已上云,可以通过域名...
  • web开发流程

    千次阅读 2021-03-02 18:36:58
    web开发流程 web开发流程图 一、需求分析阶段 在需求分析阶段,即上图所述 ”需求明确“之前的阶段 产品经理PM召集需要项目相关人员,开需求讨论会、讲解原型 相关人员需要以此了理解产品的需求,提出质疑:这是什么...
  • 1、加深对课堂讲授内容的理解,掌握解决实际应用问题时所应具有的查阅资料、技术标准和规范,以及软件编程、 调试等能力,掌握面向对象的编程思想及Java语言程序设计的规律与技巧,为进一步学习web应用开发及今后...
  • 实验二:访问任意Web网站首页,利用浏览器的Web开发工具观察HTTP交互过程和涉及到的HTTP头部字段。 搭建Web服务器,正确部署网站并利用浏览器访问 Web服务器,是指驻留于互联网上某种类型计算机的程序。当Web...
  • (来自百度,知道的可以忽略本段)Servlet是sun公司提供的一门用于开发动态web资源的技术。Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个Java程序向浏览器输出数据),需要完成以下2...
  • 根据数据统计,在培养的前端开发工程师人才中,成功拿到offer,约38%是计算机专业毕业,62%都是非计算机专业转行的学员! 在成功拿到大公司前端开发工程师offer的非计算机专业同学中,电子,机械,UI设计占了绝大...
  • 除了动态的Web界面,一个有价值的Web应用必然需要进行数据存储,开发上我们一般称之为数据持久化(Data Persistence)。从业务功能的角度出发,简单的应用可以认为就是数据的增删改查。比如一个产品级的博客应用,最...
  • 其实,这个过程也必须由读者自己在不断实践中积累和总结。 2.选择合适的IDE 工欲善其事,必先利其器,在开始开发自动化项目之前,我们有必要先来聊一聊Python有哪些IDE。前面章节中的例子默认以Python自带的IDLE...
  • 目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨。...为了方便大家系统而全面的掌握前端基础知识,小编特意整理了web前端开发入门
  • 信息安全实验总结报告篇一:信息安全实验报告课程名称: 信息安全 实验名称: 共五次实验 班级: 姓名: 同组人:指导教师评定: 签名:实验一 木马攻击与防范一、实验目的通过对木马的练习,使读者理解和掌握木马...
  • 现代 Web 开发困局

    2021-11-20 00:32:24
    大厂技术高级前端Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群导读2021 年,Web 开发整体上仍然处于比较低效的状态,各种开发,部署工具仍未很好...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 90,219
精华内容 36,087
关键字:

web开发实践报告总结