复杂业务环境中的前端架构设计

以下内容根据现场分享和幻灯片整理而成。


前端发展历程

前端发展历程可以概括为石器时代、铁器时代和工业革命三个阶段。

石器时代

 

在石器时代,前端开发者主要工作是写一些简单的HTML代码、JS代码以及切图;那时,很多公司认为前端岗位并不是很重要。

铁器时代

 

在铁器时代,各种前端框架层出不穷,如jQuery、PhoneGap、prototype等。在该时代,开发不同项目时,开发环境比较糟糕,并且不存在通用的解决办法。

工业时代

 

工业时代是前端百花齐放的时代,涌现了像React、React Native、Node等解决方案。在工程环境上相比前一个时代有了巨大的飞跃。

 

我们是如何做业务支撑的技术架构——业务范畴

 

 

在前端方面,阿里云针对不同的业务有着不同的解决方案。目前,前端所涉及的业务范畴包括:阿里云官网、市场、万网、云栖、移动等;支撑这些业务所使用的技术体系如涵盖Rect/NG、Webpack、Weex/RN、Node。

 

上图是业务支撑技术架构的DBL实践,上层是TMS发布系统、Cabinet、Hypercube和万花筒。整个技术架构中的重点部分是DBL-cli部分,它是一系列可视化命令操作的组合:Project、Light、Cabinet、Hypercube,其中Project用于处理与后端关联较为紧密的业务;Light主要用于静态页面模块化的发布;Cabinet用于活动页面、个性化页面的开发;Hypercube提供了可视化的方式用于管理状态的转移。下面来具体看一下每个模块的组成。

 

Project包括Init、Dev和Publish。在初始化时,会根据用户的选项进行相关项目(移动项目、React项目)的进行初始化;并且在本地调试时会起相应的端口,如3001、8001端口等。

 

Light部分提供了GUI界面,并且提供了Schema语法去描述该模块所需的数据;Schema发布之后,会有相关的系统将其翻译成相关数据,便于运营人员直观地填写数据。

Hypercube提供了可视化的方式用于管理状态的转移,十分简便。通过Hypercube这种方式将不同的状态作为模块,不同的状态之间可以共享相关代码,进而节省了极大的人力。其实现过程是将不同的状态注册成插件,并且初始化,当需要调用时启用即可。

未来展望

未来,前端的发展应该朝向以下几个方面:

第一,云端构建。目前,不同的业务有着不同的配置,整个行业中不存在统一的解决方案;希望能够通过云端配置的方式建立一个统一的解决方案,一劳永逸。

第二,AR/VR。希望未来前端设计能够同AR/VR结合起来,展现方式更加多元化。

第三,基于Docker的持续集成。未来希望不同开发者能够将各自的架构方案以Docker这类服务化方式输出,并且以ISV这类方式输出到阿里云市场中,建立完整的前端生态。

第四,监控。未来当线上应用运行出现错误时,希望能够通过日志、短信、邮件等方式通知到责任人,避免重要损失。

时间: 2024-10-31 14:52:34

复杂业务环境中的前端架构设计的相关文章

面向业务的立体化高可用架构设计

原文链接:http://www.csdn.net/article/2015-10-27/2826042 ======================================================== 面向业务的立体化高可用架构设计 发表于2015-10-27 10:47| 2924次阅读| 来源<程序员>杂志| 8 条评论| 作者李运华 <程序员>杂志2015年10月B架构李运华面向对象 摘要:为了实现阿里九游游戏接入系统的业务高可用,技术人员跳出传统的面向系统的

IOS中 浅谈iOS中MVVM的架构设计与团队协作

今天写这篇文章是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇文章的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦~). 每日更新关注:http://weibo.com/hanjunqiang  新浪微博 由于本人项目经验有限,关于架构设计方面的东西理解有限,我个人对MVVM的理解主要是借鉴于之前的用过的MVC的Web框架~在学校的时候用过ThinkPHP框架,和SSH框架,都是MVC的架构模式,今天MVVM与

京东资深前端架构师分享前端工程化在电商首页中的实践

大家好,我是京东用户体验设计部前端架构团队的刘威,网上ID是putaoshu,非常高兴 "ITA1024团队"的邀请,有这样的一个机会与大家分享下我们团队关于2015年京东PC新首页的一些前端开发实践,希望通过今天的讲解能为大家以后在大型前端项目开发和改版时提供一个思路和参考.   今天我的讲解主要分为两部分,具体如下: 京东首页前端架构设计与实现 面临挑战 前端页面静态化 前端页面整体架构 前端页面加载策略 前端基础架构 前端工具和系统 前端灾备策略 前端性能优化 前端工程化在电商首

Hadoop集群环境下的网络架构的设计与优化

Hadoop集群环境下的网络架构的设计与优化 冯力 杨凯 杨帆 大数据时代,研究大数据的IT厂商把研究重心放在优化大数据系统软件架构.优化业务逻辑.优化数据分析算法.优化节点性能等方向,而忽略了大数据环境基础设置中网络环节的评估和优化.本文介绍了思科公司在Hadoop集群环境下的网络架构设计与优化经验.大数据Hadoop环境网络特性Hadoop集群中的各节点通过网络连接起来,而且MapReduce中的以下过程会在网络中传输数据. Hadoop集群环境下的网络架构的设计与优化

云数据库产品及架构设计背后的考量

摘要:8月24日,阿里云数据库技术峰会到来,本次技术峰会邀请到了阿里集团和阿里云数据库老司机们,为大家分享了一线数据库实践经验和技术干货.在本次峰会上,阿里云数据库高级产品专家萧少聪(铁庵)介绍了全体系阿里云数据库产品并对于阿里云数据库产品的实现架构进行了分享,帮助大家了解了阿里云全数据库产品体系能解决哪些实用场景的问题,同时帮助大家了解其解决的原理. 以下内容根据演讲嘉宾现场视频以及PPT整理而成. 本次分享将主要介绍阿里云是如何设计云数据库产品的架构的,以及在云数据库产品的架构设计背后的故事

利用Docker轻松实现云原生应用 - 高可用架构设计

本文为利用Docker和容器服务轻松实现云原生应用系列的第一篇 高可用架构设计(本文) Spring Boot + Redis分布式会话 最近对应用迁云的讨论很多,很多用户对云环境中的应用架构和运维方式还不了解.直接利用云服务器替换自有物理机并不是使用云的正确姿势. Cloud Native Application(云原生应用)是当下一个热门名词,简单而言就是针对云计算的特性,来设计应用架构,并优化应用的交付.运维流程.Linux基金会旗下的云原生计算基金会 CNCF(Cloud Native

.NET应用架构设计—用户端的防腐层作用及设计

阅读目录: 1.背景介绍 2.SOA架构下的显示端架构腐化 3.有效使用防腐层来隔离碎片服务导致显示端逻辑腐烂 4.剥离服务调用的技术组件让其依赖接口 5.将服务的DTO与显示端的ViewModel之间的转换放入防腐层 5.1.转换逻辑过程化,直接写在防腐层的方法中 5.2.转换逻辑对象化,建立起封装.重用结构,防止进一步腐化 6.防腐层的两种依赖倒置设计方法 6.1.事件驱动(防腐层监听显示逻辑事件) 6.2.依赖注入接口 7.总结 1.背景介绍 随着现在的企业应用架构都在向着SOA方向转变,

促销保障并不难,架构设计轻松学

买买买的背后 每年的"双十一"或者各种促销和秒杀"会给电商系统带来很多挑战,比如:1. 集中,不论是哪个时间点,一旦有抢购开始,所有的人都集中在那个时间段: 2. 瞬时,每个抢购的东西发放出来之后,会在很短的时间内被抢购到:3. 拥堵,抢购活动在支付的时候经常会出现拥堵现象.那么系统的压力也分为几个层面:页面访问压力,比如"双十一"期间,www.taobao.com的页面访问压力是最大的:业务逻辑处理压力,当我们看到自己想要了解的商品,需要点进去查看商品信

DDD战略篇:架构设计的响应力

当敏捷宣言的17位签署者在2001年喊出"响应变化胜于遵循计划"这样的口号时,鲜有组织会真正把这句话当回事儿,甚至很多经验丰富的管理者会认为好的计划是成功的一半,遵循计划就是另外一半.然而在时下的第四次工业革命浪潮中,可能很多管理者已经不会简单满足于"响应",而是选择主动发起变化了.不确定性管理成了这个时代的主旋律,企业的响应力成了成败的关键. 随着这种趋势的深入,架构设计这个技术管理领域也被推到了风暴边缘."稳定"这个过去我们用来形容好系统的词