前端架构思想

软件架构(software architecture)是一系列相关的抽象模式,用于指导大型软件系统各个方面的设计。

传统软件架构描述的对象是直接构成系统的抽象组件,侧重于系统的抽象、拆分、组织方式等。所以如果从传统软件架构定义出发,前端架构可能就是指前端项目的系统设计了。在进行系统设计之前,由于前端开发语言缺乏一定的工程能力,所以web前端架构师相比传统软件架构师还应该能提供以下开发基础的支持:

  • 开发规范:开发规范设计非常重要,设计良好的开发规范应该以实用性为前提,可以提升开发效率,降低维护成本。常见的规范主要是针对模块化开发定义的,规范对开发和维护有极大的帮助!
  • 开发模型:主要是模块化开发。前端由于编程语言的问题,没有原生的模块化支持,所以架构师在做架构设计之前,要先提供模块开发体系。模块化开发体系设计挺复杂的,完整的模块化体系要统一js、css和模板的模块化处理,此外,js、css模板中的资源(图片等)引用也是要考虑的问题。此外,模块化框架肩负着资源的加载控制,要面对性能优化,所以,好的架构师给出的模块化方案应该是能把性能优化做到框架中,性能是一个工程问题!
  • 构建工具:还是由于前端开发语言的问题,前端还需要构建工具配合,才能完成开发规范、开发模型的落地实现。这部分也许有人认为是非必须的,但是我可以给出完整论证证明标准前端项目必须经过构建,这里就不展开了。总之,前端架构师在给出规范、模型之后,还要给出配套的工具来保证它们的实现。

web前端架构师至少要提供以上3项之后才能开展正式的架构设计,我觉得这部分是衡量一个架构师设计能力的重要指标之一。基础搞定了,架构设计的开展才能顺利。没有标准的模块化支持,架构设计很难做。

此外,由于web前端的产品模式与传统软件有很大差异,所以我觉得真正的前端架构师还应该能考虑以下问题:

  1. 项目部署:前端项目部署应该由前端架构师来决定,这里涉及到网络性能优化和开发规范对接的问题,所以前端架构师要理解工程部署的过程,并把开发和部署打通,否则开发受限于部署,架构设计会遇到阻碍。
  2. 组件化与组件生态:由于前端面向的是界面设计,所以在模块化之上还有组件化开发模型需要架构师提供。此外,项目中一些可复用的模块或组件应该有一定的复用渠道,这部分我称之为生态。架构师应该提供这样的渠道来解决多个团队或项目之间的代码复用问题。
  3. 前端统计:前端统计包括性能统计、访问统计、用户行为统计、错误统计、安全监控等,虽然有些统计属于产品指标,但在大数据时代,前端研发的方向应该有一定的数据做指导,前端架构师必须关心统计数据,并能提供统计方案、统计平台是一种衡量指标。
  4. 前端安全:这部分也应该有架构师负责的部分。主要是在开发、统计的过程中对前端安全做保障,比如xss修复、页面脚本注入监控等
时间: 2024-10-17 14:18:36

前端架构思想的相关文章

【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

 说在前面 好几天没更新这个系列文章了,这段时间还是在研究这块东西,遇到的各种奇葩问题,最后写完,只是调试就花了两天,果然发现在和大神之间的距离越来越远,在加上大部分时间在追求自己的梦想,梦想同样也是遥遥无期啊!一直在思考星星的那句话,人到底该不该追求梦想,做个咸鱼到底好不好的,吃吃喝喝睡睡的,反正最近感悟挺多,抽时间写个文章,好好和大家聊聊,把我的心里话告诉大家,程序员不容易,寻梦者更难啊!比如,这个所谓的pc网站的前端框架,这对一个做后台而且还是多年一直在做C#.JAVA没怎么写脚本的我来说

24Web前端架构

近来都是接触前端,所以学多点这方面的东西,虽说有实战到项目里面去了,但可能还没走到所谓正确的道路上去.欢迎交流. 转载请说明来着:http://blog.csdn.net/wowkk --------------------------------------------------------------------------------------------- 如果Web前端做多了一点,那就会意识到,无论项目大小,都得考虑到一个"架构"的问题. 因为只要是项目,就会涉及到&qu

关于互联网应用前端架构的一些思考

一.互联网应用的分类. 讨论前端架构之前,首先要弄清楚互联网应用的类型,明确了自己的产品所属的类型才能打造属于自己的架构.对互联网产品进行分类,网上有很多不同的观点.我觉得分类是多维度的,但是按照交互以及功能的复杂程度来分类是比较客观的.因此,我比较认同淘宝玉伯在关于前后端开发模式中对应用的分类,以下引用玉伯的观点: 前端涉及的产品形态在业界可分为两大类:Web Pages 和 Web Apps . Web Pages 是浏览类的,用户主要是来看的:以内容展现为主,辅有少量交互.前端提供基础类库

经典总结!语义化HTML和前端架构

这是一篇我喜欢的思想,经验,理念,以及过去几年中我所试验的理念的集合.它覆盖了HTML语义,前端架构的组件和方法,类命名模式,和HTTP内容压缩. 我们不会停止探索而我们一切探索的终点将会到达我们出发的地方于是我们第一次认识了这个地方. T.S. Eliot — “一人”关于语义语义是对标记与符号之间的关系,以及它们的含义的研究.在语言学中,这主要是对语言中的符号(如单词,短语,或声音)意义的研究.在前端web开发的上下文中,语义大多是与元素,属性,和属性值(包括像Microdata之类的扩展)

前端架构解决方案

ue2平台通过1年多的努力,为解决前后端友好分离对angular,react,vue并结合nodejs进行服务端渲染, 同时做了大量的中间件,为前端架构设计提供非常良好的解决方案.例如: 1. api请求代理 2. 静态图片缓存 3. less服务端编译 4. 静态资源合并,动态压缩 5. 服务端渲染 6. 全局缓存控制 等等以及对底层的框架进行了二次封装从而产出了 easyspa,easyme,easyvue更加友好的前后端分离架构设计思想. 并配有相应的脚手架工具,使开发者能够快速构建应用而

使用模块化思维和模板引擎搭建前端架构(require+underscore)

require.js 介绍: 是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量. 官网:http://www.requirejs.cn/    (PS:如果没接触过,刚开始看都是一头蒙蔽的,建议看下菜鸟教程) 新手教程:http://www.runoob.com/w3cnote/requirejs-tutorial-1.html 优点:可完成团队协作.模块复用.单元测试等等一系列复杂的需求 undersco

WEB前端开发电商网站前端架构

课程介绍通过一个垂直电子商务网站,介绍前端架构搭建和实现的步骤和方法,以及在这个过程中我们需要做什么才能帮助项目最终从设计走向实现.课程提纲第1章 前端架构知识准备认识前端架构,了解前端架构技术.产品设计和发布.数据分析和优化的基础第2章 前端架构设计了解前端架构的组织方式.页面层次的架构组织.架构设计和组件化方案等.第3章 前端架构实施了解架构的实施.优化思路,如何实施自动化.通过蛋糕电商网站讲解,分析案例.如何图解设计和交互图.如何从目录入手搭建基本架构.如何从页面层次进行架构搭建和最后项目

web富客户端应用下,前端架构问题。

前言: 以前的工作大部分都是,前端做页面 稍微写几个js效果就算是 有复杂的效果 也没有涉及到 需要去调用后端数据的层面.总体来说,以前的页面逻辑会相对简单后端会做更多的事. 而现在,这些任务都抛给前端来做了..  前端的业务逻辑变得很复杂 有的时候甚至 比后端的更复杂.(当然这个也跟写接口的人水平有关...) 在这样的背景下面,如果还是以前那套 页面里面写js 或者哪里有效果写哪里的话.无论是实现,还是后面的维护都是一个很大的问题.. 所以,我觉得富客户端web应用,很有必要组建一个自己的前端

没有最好,选择最适合自己的前端架构

前端框架不断推新,众多IT企业都面临着"如何选择框架","是否需要再造轮子"的抉择.去哪儿网前端架构师司徒正美分析了各主流行框架优劣点.适用场景,并针对不同规模的公司.项目给出了相应的前端技术选择方案. 最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架. 每次新开业务线或启动新项目时,首先第一件事就是纠结:使用什么框架,重造什么轮子?我很高兴应CSDN的邀请谈我的看法. RequireJS,前端技术发展分水岭 在五六年前,移动端还没有兴起,我们没有什么选