写点什么

web开发

0 人感兴趣 · 59 次引用

  • 最新
  • 推荐
https://static001.geekbang.org/infoq/1d/1d878bfa21987fd8d913c69ea76063ef.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

什么是前端开发领域的 Cumulative Layout Shift 问题

CLS 是 Cumulative Layout Shift(累计布局偏移)的缩写,它是一个用于度量网页稳定性的指标。CLS issue 指的是网页在加载过程中存在的累计布局偏移问题,这些问题会导致网页元素在页面上闪烁或跳动,影响用户体验。

https://static001.geekbang.org/infoq/2c/2c6dddbf682bfab9727df33017a81375.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

如何给 Fiori Elements 应用添加自定义按钮

用户头像
Jerry Wang
2022-11-24

笔者的日常工作内容从 2020 年 8 月转到 Angular 前端开发之后,算是领略到了这个流行前端框架繁荣生态圈的风采:在开发过程中遇到 Angular 技术问题时,很容易在社区里找到大量相关文章。

https://static001.geekbang.org/infoq/21/212fa7ff99e6afa3f79947a2913e9543.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

深入掌握 Fiori Elements 工作原理的前提条件:理解 Smart Field

用户头像
Jerry Wang
2022-11-23

SAP 前端开发者如今使用的 SAP Fiori Elements,在 2016 年时被称为 Smart Template,其在 SAP 官网的定义是: Smart Template 是一套框架,针对最常用的应用模式,根据元数据注解,加上预定义的模板,在运行时能够动态生成 SAP UI 页面。

https://static001.geekbang.org/infoq/1c/1cd79adea8649b20f53fea3f27da1cc7.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

本地开发完成的 Fiori Elements 应用,部署到远端 ABAP 服务器上的详细步骤

用户头像
Jerry Wang
2022-11-21

之前笔者的两篇文章,分别介绍了如何在本地使用 Visual Studio Code 创建一个 SAP Fiori Elements 应用,以及使用 Fiori Elements Controller Extension 理念,对该 Fiori Elements 应用进行二次开发的具体步骤。本文介绍本地开发完成如何部署到服务器上。

https://static001.geekbang.org/infoq/72/724654da76d7ecba4e3201b1546ab11e.webp?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Python 进阶 (五十三)Flask Web 开发实现将表单渲染成 HTML

在利用Flask进行Python Web开发时,页面中的wtf.quick_form(form)函数中的参数form是如何与视图函数中的form变量关联起来的?即Flask是如何将表单渲染成HTML的?下面以实例的形式进行问题求解。

https://static001.geekbang.org/infoq/d9/d923d7f24ee701e60bff726b8db2ec37.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

使用 Fiori Elements 框架创建 UI5 Web 应用

用户头像
Jerry Wang
2022-11-17

笔者前一篇文章 SAP Cloud Application Programming 介绍 - 2021 更新版,介绍了如何使用 SAP Cloud Application Programming,在本地创建一个 OData 服务,并且利用 SAP CAP SDK,在一个自动且临时生成的 Fiori Elements 应用里,消费该 OData 服务。

https://static001.geekbang.org/infoq/3d/3dd7405fa9e0993dd997d4a8136be7b2.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

谈谈企业级前端应用 UI 界面增强实现的一些实际案例

用户头像
Jerry Wang
2022-11-11

本文首先快速回顾几种 SAP 产品中的 UI 增强思路,然后具体介绍该思路是如何在 SAP Commerce Cloud(电商云) UI 增强中贯彻实施的。

https://static001.geekbang.org/infoq/7c/7c7c40ea5a218714b80f70e9e281d002.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

谈谈企业级前端应用中通过 CSS 达到布局定制化的话题

用户头像
Jerry Wang
2022-11-11

本文以 SAP CRM Fiori 以及 SAP Commerce Cloud UI 这两个分别采用 UI5 和 Angular 开发的企业级前端应用为例,介绍了设计人员如何采用 CSS 调整来达到布局定制化的效果。

https://static001.geekbang.org/infoq/7c/7c7c40ea5a218714b80f70e9e281d002.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

谈谈 Angular 应用 Feature Module 的延迟加载话题

用户头像
Jerry Wang
2022-11-10

笔者最近工作中处理了 SAP Commerce Cloud (电商云) UI 的一个懒加载 (Lazy Load) 功能的客户问题,通过本文把自己学到的关于 Angular Feature Module 延迟加载的知识做个记录。

https://static001.geekbang.org/infoq/05/0544935f304b35bf5b3127ae4c159001.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

聊聊前端开发中的 Ghost Design 设计思路

用户头像
Jerry Wang
2022-11-08

笔者最近做 SAP Spartacus 前端开发时,接触到一个新的开发术语:Ghost Design. 无论是幽灵设计,还是之前 SAP UI5 提供的页面加载动画效果,都是改善用户使用体验的一种手段:提示用户当前页面正在加载后台数据,或是执行一些比较费时的操作。

https://static001.geekbang.org/infoq/31/316227e4e6fc9ed0f0aff20f51a6596f.webp?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

【web 开发基础】PHP 快速入门(10)-PHP 其他运算符详解

用户头像
迷彩
2022-10-24

“? :”可以提供简单的逻辑判断, 在PHP 中是唯的三元运算符。 类似于条件分支语句if...else....;但是三元运算符使用上更加简洁。 其语法格式如下所示: (expr1) ? (expr2) : (expr3)

https://static001.geekbang.org/infoq/d1/d1ebbdf0218d7931e8041ecdb46b38fc.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

一个 ExpressionChangedAfterItHasBeenCheckedError 错误的解决过程

用户头像
Jerry Wang
2022-10-07

我的 Component 里有一个 selectedPane 字段(第56行),作为数据源显示在 div 标签里(代码第47行):

https://static001.geekbang.org/infoq/7c/7c7c40ea5a218714b80f70e9e281d002.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式

用户头像
Jerry Wang
2022-10-06

我创建了一个 selector 为 app-content-section 的 Component,用于容纳内容投影(content projection):

https://static001.geekbang.org/infoq/d1/d1ebbdf0218d7931e8041ecdb46b38fc.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

使用 RxJs 实现一个支持 infinite scroll 的 Angular Component

用户头像
Jerry Wang
2022-10-03

本文介绍了如何使用 Angular 前端框架,基于 Rxjs 工具库开发一个支持 infinite scroll 的延迟加载列表的详细步骤。

https://static001.geekbang.org/infoq/04/04ce7f3896a47bd81917b38cb82d0dfb.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

SAP 电商云 Spartacus UI 的响应式 UI 实现细节

用户头像
Jerry Wang
2022-10-03

在文件 projects\storefrontlib\layout\config\default-layout.config.ts 里,定义了各个屏幕尺寸所对应的 breakpoint:

https://static001.geekbang.org/infoq/7c/7c7c40ea5a218714b80f70e9e281d002.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

如何解决 Angular custom library module 在 ng build 时无法被识别的错误

用户头像
Jerry Wang
2022-09-27

SAP Spartacus angular.json, 是 Angular CLI 自动生成的文件,里面针对 storefrontapp,生成的 tsConfig 属性,指向一个 tsconfig.app.json 文件,该文件指定 ng build 如何对该 app 进行构建。

https://static001.geekbang.org/infoq/05/0544935f304b35bf5b3127ae4c159001.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

100 行代码在微信公众号里集成地图搜索功能

用户头像
Jerry Wang
2022-09-26

本文首先介绍了如何调用微信公众号菜单 API,给公众号添加新的菜单项。接着介绍了如何将一个 Web 应用部署在云平台上,并将生成链接绑定到微信菜单项上。最后,我们使用百度地图 API 开发一个 Web 应用,绑定到微信公众号菜单项上,即实现了地图集成的功能。

https://static001.geekbang.org/infoq/7c/7c7c40ea5a218714b80f70e9e281d002.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

关于 Angular 应用 tsconfig.json 中的 lib 属性

用户头像
Jerry Wang
2022-09-24

SAP Spartacus 应用的 tsconfig.json 文件里,有一个 lib 属性,值为 es2020 和 dom:

https://static001.geekbang.org/infoq/7c/7c7c40ea5a218714b80f70e9e281d002.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

关于 Angular 应用 tsconfig.json 中的 target 属性

用户头像
Jerry Wang
2022-09-23

我新建了一个 Angular 应用,自动生成的 tsconfig.json 文件里,target 为 es2017,module 为 es2018.

https://static001.geekbang.org/infoq/1c/1cd79adea8649b20f53fea3f27da1cc7.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

漫谈 SAP 产品里页面上的 Checkbox 设计与实现

用户头像
Jerry Wang
2022-09-19

本文回顾笔者从业多年以来,所经历过的不同 SAP 产品里的 Checkbox 的设计与实现。

https://static001.geekbang.org/infoq/6a/6a61fbf716ca104034cdd13ac6a5a2e0.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

创建第一个 Cypress 应用后使用命令行 npx Cypress open 报错的原因分析

用户头像
Jerry Wang
2022-08-22

大多数测试工具(如 Selenium)通过在浏览器外部运行并通过网络执行远程命令来运行。Cypress 正好相反。 Cypress 在与 Web 应用程序相同的运行循环(run loop)中执行。

https://static001.geekbang.org/infoq/7c/7c7c40ea5a218714b80f70e9e281d002.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

从 Angular Component 和 Directive 的实例化,谈谈 Angular forRoot 方法的命令由来

用户头像
Jerry Wang
2022-08-19

同 Angular service 的单例特性不同,Angular 组件和指令通常会被多次实例化,比如 HTML markup 中每出现一次 Component 的 selector,就会触发 Component 的一次实例化。

https://static001.geekbang.org/infoq/29/293d59b00ca56eeaf4c4c87a3e60c9da.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

五分钟给你的 gRPC 服务加上 HTTP 接口

用户头像
万俊峰Kevin
2022-08-18

你看,给我们的 gRPC 服务加上 HTTP 接口是不是五分钟就可以完成了?是不是? 另外,不要小看这个简单的 gateway,配置里如果是对接后面的 gRPC 服务发现的话,会自动负载均衡的,并且还可以自定义中间件,想怎么控制就怎么控制。 是不是有点心动了呢?

https://static001.geekbang.org/infoq/75/75b5ecb30bdac62785e961aa23407857.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

将使用回调函数作为参数的函数改造为返回 Promise 的一个具体例子

用户头像
Jerry Wang
2022-08-17

我开发了一个函数 loadScript,可以动态加载指定的本地 JavaScript 文件。源代码如下:

https://static001.geekbang.org/infoq/b7/b77ad14d08228847e4609601c4df2ca4.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

SAP ABAP Netweaver 服务器的标准登录方式讲解

用户头像
Jerry Wang
2022-08-15

本文继续介绍 ABAP 项目开发里经常使用的一个知识点:ABAP Netweaver服务器的登录方式(Standard Logon Procedure).

https://static001.geekbang.org/infoq/45/45e961b1b8ad4b0d1eb24901fbce0891.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

ABAP 应用服务器的 HTTP 响应状态码 (Status Code)

用户头像
Jerry Wang
2022-08-11

本文记录了笔者之前在SAP成都研究院CRM开发团队在开发SAP CRM Fiori应用时的一些技术讨论,关于HTTP请求的响应状态码的差异。 当时我们用Chrome打开SAP Fiori应用,在Chrome开发者工具的network标签里,观察到有的请求响应码为HTTP 200,有的却是HTTP 304.

https://static001.geekbang.org/infoq/7c/7c7c40ea5a218714b80f70e9e281d002.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Angular 为什么要引入 injection token 的概念

用户头像
Jerry Wang
2022-08-06

你可以定义和使用一个 InjectionToken 对象来为非类的依赖选择一个提供者令牌。

https://static001.geekbang.org/infoq/fe/fe85a6a8ce8580b605fb2296b747251c.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

SAP Fiori 应用 Adapt UI 动态显示或者隐藏的技术设计细节解析

用户头像
Jerry Wang
2022-07-14

本文首先通过一个笔者工作过程中,经常被同事问起的一个问题出发,接着详细介绍了笔者如何通过单步调试的方式,自行分析 SAP Fiori Adapt UI 按钮显示与否的设计逻辑,通过这个例子再次阐述了 SAP 系统的权限管控设计思路。

web开发_web开发技术文章_InfoQ写作社区