SAP 前端技术的演化史简介
Jerry之前曾经写过一篇微信公众号文章,题目叫<>
关注我的公号“汪子熙”后,在历史菜单“前端开发相关”里即可找到这篇文章:
该文章简单回顾了SAP UI技术的发展历史,然后提了下Salesforce的Apex和Lighting Component等技术和框架。
目录
SAP UI
SAP GUI + Dynpro
Web Dynpro
BSP/CRM WebClient UI
SAP UI5/Fiori
UI5 in SAP Cloud for Customer
Hybris Enterprise Commerce Platform
--------------------------------------------------------------------------------
Salesforce UI
Apex
Lightning Experience
Aura Framework
Lightning Component Framework
Visualforce
我也画了张简单的图:
R1和针对于大型机的R2对我们来说实在太古老了,对我们来说,只能通过SAPGUI里的复古主题,即Classical Theme来体验一下这些老古董的外观风采。
到了1992年出现了类似JSP技术的BSP(business server page),能够借助在服务器端执行的ABAP语言实现动态网页效果。
在运行时,每个BSP页面会自动生成一个临时的ABAP类,执行这些BSP页面上嵌入的ABAP代码,执行的结果再渲染成原生的HTML代码。
值得一提的是,BSP技术兼容普通的HTML/JavaScript应用,换句话说,几乎所有能运行在除Netweaver以为的web服务器上的基于HTML/JavaScript的web应用,也能以BSP为载体,运行在Netweaver上。因此,即使是如今SAP的旗舰级产品S/4HANA里的很多Fiori UI应用,也是以BSP应用为载体存储在Netweaver上的。
比如S/4HANA物料主数据管理的Fiori应用,其名称在Chrome开发者工具里能看到:
这个BSP应用在Netweaver上能找到:
诞生于1992年的BSP技术到了今天还在服役,这本身就是一个奇迹了。当然它本身由于历史原因也有一些局限:
- 开发效率不够高,没有类似后来UI5里控件库的概念,导致开发人员需要重复造很多轮子。SAP后来自己也发布了一些BSP Extension,类似JSP里的tag,以此来弥补开发效率的缺陷。
另外BSP的开发工具在SAPGUI里只有事务码SE80,这个工具在做HTML和JavaScript开发时显得不够友好。因此后期SAP Fiori开发也采取了在本地现代IDE比如Eclipse里做开发,完毕后再上传到Netweaver自动生成BSP的方式。
- 没有MVC的概念,在大型企业级应用开发中显得力不从心。
正是由于暴露了这两个缺陷,促成了WebUI和Webdynpro的问世。对这两种前端技术的详细介绍,请参考Jerry之前提到的微信文章:SAP UI和Salesforce UI开发漫谈,这里不再重复,只是聊聊一些该文章中没有提过的内容。
ABAP Webdynpro的亮点就是能够以所见即所得的方式进行UI界面开发,缺点是不再支持类似BSP那样兼容传统的HTML/JavaScript,因此无法实现某些对界面复杂度和交互性要求较高的需求。
而WebUI在继承了BSP所有优点的同时,在BSP基础上提供了对MVC的封装,使得开发效率大大提高,同时开发出来的Web应用结构清晰,不再会出现一个视图页面几千行代码的情况。
下图是一个典型的WebUI模型,MVC三层在workbench里有清晰的界定。
WebUI和ABAP Webdynpro至今仍广泛应用于SAP产品中。在S/4HANA的CRM模块里,WebUI继续扮演着非常重要的角色,详情请阅读我下面这篇文章:Hello World, S/4HANA for Customer Management 1.0
而Webdynpro,是SAP SRM UI开发的主流技术。
搜索公网上所有使用了SAP BSP技术的网站:
https://www.google.com/search?q=inurl:/sap/bc/bsp/&gws_rd=ssl
使用了Webdynpro的:
随着时间的推移,用户对移动设备上访问网页的体验要求越来越高,因此有了SAP从业者现在很熟悉的前端技术:SAP UI5。
关于UI5最新的技术发展方向,请关注我的公众号“汪子熙”,阅读我写的这篇文章:
Fiori Fundamentals和SAP UI5 Web Components
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
SAP 前端技术的演化史简介的更多相关文章
- 记录一次参加D2前端技术论坛的杭州之行
前言 在这里,闰土首先要感谢以下两位大佬提供的门票,分别是来自新浪微博部门的H同学,以及来自小米科技的D同学. 当我周六晚上在青旅写完这篇文章过后,第二天上网发现,已经有大佬提前一步在掘金上发布了高质 ...
- 前端技术之_CSS详解第一天
前端技术之_CSS详解第一天 一html部分 略.... 二.列表 列表有3种 2.1 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unorde ...
- 使用前端技术和MySQL+PHP制作自己的一个个人博客网站
源代码地址:https://github.com/YauCheun/BlogCode 我的博客网站地址:http://www.yublog.fun/ 制作前景: 想拥有一个自己独自开发的一个小型博客网 ...
- 绝版珍珍藏:web前端技术学习指南
绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...
- 前端测试框架jest 简介
转自: https://www.cnblogs.com/Wolfmanlq/p/8012847.html 作者:Ken Wang 出处:http://www.cnblogs.com/Wolfmanlq ...
- 解密国内BAT等大厂前端技术体系-阿里篇(长文建议收藏)
进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...
- 解密国内BAT等大厂前端技术体系-百度篇(长文建议收藏)
1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...
- 解密国内BAT等大厂前端技术体系-携程篇(长文建议收藏)
1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第四篇,前三篇已经讲述了阿里.腾讯.百度在前端技术这几年的技术发展. 这一 ...
- 解密国内BAT等大厂前端技术体系-腾讯篇(长文建议收藏)
1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第三篇,前两篇已经讲述了阿里和百度在前端技术这几年的技术发展.这一篇从腾讯 ...
随机推荐
- input属性type为file打开文件资源管理器时,如何限制多次选取或只能一次选取的行为
1.input标签没有设置multiple属性,文件资源管理器默认一次选取 <!doctype html> <html lang="en"> <hea ...
- bzoj 3600: 没有人的算术
Description Solution 我们可以给每一个数钦定一个权值 , 这样就可以 \(O(1)\) 比较大小了. 考虑怎么确定权值: 用平衡树来维护 , 我们假设根节点管辖 \([1,2^{6 ...
- [转]MVC中几种常用ActionResult
本文转自:http://www.cnblogs.com/xielong/p/5940535.html 一.定义 MVC中ActionResult是Action的返回结果.ActionResult 有多 ...
- win7怎么去除快捷方式的小箭头
方式一. 新建一个txt文档把以下内容复制进去 在重命名001.bat 打开就行了 但要重启之后才有效 @ECHO OFF :MENU ECHO. ECHO. =-=-=-=-=请选择您要运行的项目= ...
- 使用 NodeJS+Express+MySQL 实现简单的增删改查
关于node.js暂时记录如下,以后有时间一定学习 文章来自简书,作者:sprint,2016-07 使用 Node.js + Express+MySQL 实现简单的增删改查 https://www. ...
- ASP.Net ListBox DropdownList 不同条目设置背景色和字体颜色( 转· 载 )
ASP.Net ListBox DropdownList 不同条目设置背景色和字体颜色 2009-09-30 来自:真有意思 [ZU14.CN] 字体大小:[大 中 小] 摘要:在HTML展现页面 ...
- FOR XML PATH做为数据表中单列或者多列的字符串拼接的方法,放到一列中去,很好用。
先看看自己弄得例子,SELECT sName+',',hoppy+',' FROM student2 where hoppy='游泳' FOR XML PATH('')--PATH后面跟的是行标题, ...
- [C语言] 数据结构-逻辑结构和物理结构
数据结构:相互之间存在一种或多种特定关系的数据元素的集合 1.数据结构分为逻辑结构和物理结构 集合结构:集合结构中的数据元素除了同属于一个集合外,他们之间没有其他关系 线性结构:线性结构中的数据元素之 ...
- future3.2 Tomcat启动时错误:Cannot rename original file to ...
其日志中第一个警告如下: 警告: Unexpected exception resolving reference java.io.IOException: Cannot rename origina ...
- 【学习笔记】--- 老男孩学Python,day18 面向对象------ 属性,类方法,静态方法
属性 属性: 将方法伪装成一个属性,代码上没有什么提升,只是更合理. 应用场景: 类中 要用名词时候可以用@property 比如,求面积,周长,平方,体脂 等运算时候 例如: bmi是名词,最 ...