【前端开发】前端架构与具体的应用的矛盾,最终的简单才是王道。

简介: 写在前面   年关将近,这年味愈加的浓烈了哈,似乎无心工作,似乎家乡的叨念从远远的方向传进了你的心里,坚持住哈,马上,就回家了。        进入正题,首先,我需要先解释下这个标题所表达的意思,以及它背后引出的具体的问题,前端架构与具体的应用的矛盾 这句话为什么要这么说,相信大部分公司,不论你...

写在前面

  年关将近,这年味愈加的浓烈了哈,似乎无心工作,似乎家乡的叨念从远远的方向传进了你的心里,坚持住哈,马上,就回家了。

       进入正题,首先,我需要先解释下这个标题所表达的意思,以及它背后引出的具体的问题,前端架构与具体的应用的矛盾 这句话为什么要这么说,相信大部分公司,不论你是创业型公司、外包公司或者是大一点儿的,上市的,在你们的前端技术栈中,react出现的频率应该不低,vue是更甚者吧,基于webpack、glub构建的应用应该很多了,甚至可以说,这些技术已经占领了前端的半个天下,但是笔者在这里呀,不禁要提出一个问题,那就是,你们的技术栈真的带给前端更简单的内容了吗? 使用这些技术栈的时候,你们的应用是否会变得学习成本高昂、扩展能力差、依赖高阶程序员、文档不齐全、有没有测试用例?

架构的本质

  我认为架构的本质应该是什么? 它应该是基于可能面临的风险构建的一套能够适应当前业务、扩展未来业务、行为可预测的、高可用性的。在能解决这些问题的前提下,架构应该是高度抽象的吧,一个优秀的架构,它一定要足够简单,基于一个或多个抽象的理解上构建出来的。

  简单才是本质,spring为什么那么火,它足够简单。一旦你了解了它的抽象思维方式,整个开发极易上手,这就是一个优秀的架构应该有的表现力。如果你正在设计前端架构,我的忠告是,最好结合你的业务实际去实现它而不是去考虑最新的技术栈,盲目的追求渲染速度、组件式等。 

  前端一定要与业务接轨,一个管理系统,你跟我谈什么渲染速度?一个正常的管理系统前端,它甚至都不需要webpack这样的工具构建,只需要一个裸的vue加上jquery就可以完成,这样的结构要优于大部分。为什么? 贴合实际嘛!  后台系统你一个前端能维护多久呢?大部分时间,后台er在维护这个界面,如果你使用的技术太过复杂,增加了学习成本,还更容易使整个架构逆向发展。

  再例如,企业官方网站,企业商城,大型公司的门户,宣传网页,这些东西完全不需要用到打包、甚至vue你都要少用, 为什么?最重要的是它们不利于SEO,然后是不利于快速迭代,设计的再复杂些,vue技术栈全部捅上去,那有什么用嘞?除了给你自己的职业生涯添加一笔,对公司来说这就是技术的债务,公司需要招比你更厉害的人才能理解你写的这些高级的代码,而这些代码一旦在无数个迭代中膨胀,最后的选择只有推倒重来,改都没的改。

 

结合业务再谈技术

  什么前端路由系统,SPA 框架,你都要结合业务,后台系统使用SPA就是耍流氓。陡然增加前端的复杂性,让前端变成了一个比后台系统还复杂的系统。这很得不偿失。仅仅是为了前端开发的便利性,忽略的整个系统的复杂度,这样的架构怎么看都是不可取的。 

  什么时候能够使用这些技术栈? 当然是业务允许、风险可以控制的情况下。  例如多终端,移动端,在移动端使用打包工具,SPA框架开发是很明智的,它们带来的优势,在渲染速度上,在使用性上,都是一流的。而且真正的实操中,这样的项目一般是重点维护的。

  要结合业务的实际选择技术,大部分时候,开发时间是有限的,实现的功能很多,盲目追求技术的新、快、是没有根据的。

  

一些看法

  推荐一些我个人开发时常用的几项前端架构,它们是我结合平时的开发实际,业务适应程度做出的技术栈调整。

  首先,如果项目大小一般,时间很紧急,我会毫不犹豫选择裸vue+jquery+bootstrap,快速开发完毕。

  如果项目中等的话,时间不多不少,我会看团队中,开发人员的比例,比如这个开发团队只有一两个前端,那么我会选择 require管理我的js模块,使用sass管理我的css模块,足够模块化,也有组件,同时开发速度够快,团队中的其他人理解起来也很快,在项目很赶的时候后台也可以帮一些忙,也不会担心他们破坏架构。具体到业务逻辑,首先了解业务的流程,例如我这个应用,面向的是企业管理人员,可能需要一些大数据展示,一些图形化界面。那么我很可能选择react+react-router+redux。

  大型项目需要依靠具体面临的可能风险,你需要调研清楚目标人群,宣传方式,例如使用SEO做搜索宣传,就不能选择打包技术,微信wap,选择vue技术栈是明智的选择等等。

  需要注意的是,最终的简单才是王道

  

写在最后

  希望大家一起探讨这方面的话题,我的观点也许是错误的,或者是有问题的,讨论一下,大家一起提升。

 

======================================================== 转载请注明出处。
目录
相关文章
|
3月前
|
人工智能 自然语言处理 开发工具
统一多模态 Transformer 架构在跨模态表示学习中的应用与优化
本文介绍统一多模态 Transformer(UMT)在跨模态表示学习中的应用与优化,涵盖模型架构、实现细节与实验效果,探讨其在图文检索、图像生成等任务中的卓越性能。
统一多模态 Transformer 架构在跨模态表示学习中的应用与优化
|
4月前
|
存储 编解码 Serverless
Serverless架构下的OSS应用:函数计算FC自动处理图片/视频转码(演示水印添加+缩略图生成流水线)
本文介绍基于阿里云函数计算(FC)和对象存储(OSS)构建Serverless媒体处理流水线,解决传统方案资源利用率低、运维复杂、成本高等问题。通过事件驱动机制实现图片水印添加、多规格缩略图生成及视频转码优化,支持毫秒级弹性伸缩与精确计费,提升处理效率并降低成本,适用于高并发媒体处理场景。
220 0
|
12天前
|
人工智能 Cloud Native 中间件
划重点|云栖大会「AI 原生应用架构论坛」看点梳理
本场论坛将系统性阐述 AI 原生应用架构的新范式、演进趋势与技术突破,并分享来自真实生产环境下的一线实践经验与思考。
|
24天前
|
前端开发 JavaScript 应用服务中间件
在Docker部署的前端应用中使用动态环境变量
以上步骤展示了如何在 Docker 配置过程中处理并注入环墨遁形成可执行操作流程,并确保最终用户能够无缝地与之交互而无须关心背后复杂性。
77 13
|
18天前
|
机器学习/深度学习 人工智能 vr&ar
H4H:面向AR/VR应用的NPU-CIM异构系统混合卷积-Transformer架构搜索——论文阅读
H4H是一种面向AR/VR应用的混合卷积-Transformer架构,基于NPU-CIM异构系统,通过神经架构搜索实现高效模型设计。该架构结合卷积神经网络(CNN)的局部特征提取与视觉Transformer(ViT)的全局信息处理能力,提升模型性能与效率。通过两阶段增量训练策略,缓解混合模型训练中的梯度冲突问题,并利用异构计算资源优化推理延迟与能耗。实验表明,H4H在相同准确率下显著降低延迟和功耗,为AR/VR设备上的边缘AI推理提供了高效解决方案。
234 0
|
3月前
|
人工智能 数据可视化 Java
什么是低代码(Low-Code)?低代码核心架构技术解析与应用展望
低代码开发正成为企业应对业务增长与IT人才短缺的重要解决方案。相比传统开发方式效率提升60%,预计2026年市场规模达580亿美元。它通过可视化界面与少量代码,让非专业开发者也能快速构建应用,推动企业数字化转型。随着AI技术发展,低代码与AIGC结合,正迈向智能化开发新时代。
|
3月前
|
存储 人工智能 缓存
AI应用爆发式增长,如何设计一个真正支撑业务的AI系统架构?——解析AI系统架构设计核心要点
本文AI专家三桥君系统阐述了AI系统架构设计的核心原则与关键技术,提出演进式、先进性、松耦合等五大架构法则,强调高并发、高可用等系统质量属性。通过垂直扩展与水平扩展策略实现弹性伸缩,采用多类型数据存储与索引优化提升性能。三桥君介绍了缓存、批处理等性能优化技术,以及熔断隔离等容灾机制,构建全链路监控体系保障系统稳定性。为构建支撑亿级业务的AI系统提供了方法论指导和技术实现路径。
362 0
|
3月前
|
消息中间件 人工智能 安全
企业级AI应用需要系统工程支撑,如何通过MCP大模型架构实现全链路实战解构?
本文三桥君深入探讨了MCP大模型架构在企业级AI应用中的全链路实战解构。从事件驱动、统一中台、多端接入、API网关、AI Agent核心引擎等九个核心模块出发,系统阐述了该架构如何实现低耦合高弹性的智能系统构建。AI专家三桥君提出从技术、内容、业务三个维度构建评估体系,为企业级AI应用提供了从架构设计到落地优化的完整解决方案。
211 0
|
3月前
|
人工智能 监控 API
MCP中台,究竟如何实现多模型、多渠道、多环境的统一管控?如何以MCP为核心设计AI应用架构?
本文产品专家三桥君探讨了以 MCP 为核心的 AI 应用架构设计,从统一接入、数据管理、服务编排到部署策略等维度,系统化分析了 AI 落地的关键环节。重点介绍了 API 网关的多终端适配、数据异步处理流程、LLM 服务的灰度发布与 Fallback 机制,以及 MCP Server 作为核心枢纽的调度功能。同时对比了公有云 API、私有化 GPU 和无服务器部署的适用场景,强调通过全链路监控与智能告警保障系统稳定性。该架构为企业高效整合 AI 能力提供了实践路径,平衡性能、成本与灵活性需求。
190 0