前端智能化

会议室:沙龙2
出品人:樊中恺

现在提起前端智能化,脑子里冒出来的几乎都是 D2C、P2C 这样的解决方案,辅之... 展开 >

专题出品人:樊中恺

百度资深研发工程师

百度资深研发工程师,Paddle.js 负责人,2008 年接触前端开发,2012 年开始移动端开发至今,曾先后负责百度浏览器、文库、阅读、手百APP 的前端技术架构工作;目前主要从事搜索前端架构、Paddle.js 等研发工作,对于端智能、工程化、前端架构等方向有较为丰富的经验。

地点:沙龙2

专题:前端智能化

现在提起前端智能化,脑子里冒出来的几乎都是 D2C、P2C 这样的解决方案,辅之以 AI 相关的能力。但是回过头想一想,我们不禁会问自己三个问题:究竟这些技术方案在具体的使用场景中创造了什么样的价值?如何实现从产品设计到产品发布的全链路智能化?除了老生常谈的智能布局和组件识别等跟 UI 自动化相关的智能化方案,我们还能再做些什么?本场关于前端智能化的分享,也许会带给你新的答案。

by 钱思成

百度
资深研发工程师

作为 ToC 场景居多的业务往往面临着和 ToB 场景不同的挑战,尤其是随着用户规模和业务团队成员的增加,会发现很多问题亟待解决:设计和产品侧的协同实践过少,无法确保团队体验一致性和新产品的孵化效率;产设研之间的沟通协作成本远超纯研发,一般会占据 70% 以上的排期;源源不断的个性化交互和视觉需求,使得组件库无序扩张,研发工作重复度太高……为了综合解决上述问题,百度通过两年的实践,沉淀出了一套完整的解决方案,旨在提供一个覆盖设计到发布全链路一站式的高效工作流,让不同角色和成员高效协同和协作。D2R 是一个模块化的解决方案,提供了设计和研发资产托管、各阶段协作流程的输入输出规范及相应的智能化生产的工具和平台;开发者可结合自身业务需求选择不同模块进行实践。

演讲提纲:

1. D2R 解决方案介绍

  • D2R 方案的发展历程
  • 业务和团队发展面临的问题,及 D2R 的解决思路
  • D2R 总体架构和各模块化方案概述

2. 介绍设计阶段的模块化方案和实践

  • D2R 的设计系统和设计工具介绍
  • 如何进行资产协同
  • 框架和技术栈介绍
  • D2R 设计系统的改进和实现原理:主题模式、Design Token、组件配置
  • 低代码的实现基础:组件编辑器、交互编辑器、动画编辑器

3. 介绍代码生产阶段的模块化方案和实践

  • 从设计到代码变更流程支持敏捷开发的实现原理
  • 智能组件库的方案和实践
  • 设计稿和原型如何生成组件和页面
  • 设计如何通过设计系统细粒度控制线上效果

4. 介绍 D2R 在百度的实践效果和智能化展望

  • 百度内的相关实践和进展
  • 智能化提效:组件智能识别、设计稿和运营页面智能化生成

你将获得:

  • 了解对产品和设计友好的可视化配置工具和关键技术栈的设计思路
  • 了解如果在若干年后产设研都被 AI 替代,低代码可能的发展路径

by 朱睿力

字节跳动
抖音前端工程师


随着业务量的增长,用于支持业务的轻量 H5 页面的开发逐渐成为一个耗费大量时间和人力的棘手问题。这些业务开发繁琐,难以沉淀,缺少自动化,如何提高这类 H5 页面的开发效率越来越成为业务增长过程中的一个痛点。UI 智能生成代码也成为解决这个问题的探索方向之一。本次分享会主要介绍字节跳动抖音前端团队所探索的智能生成代码项目 ALYX 的解决方案、ALYX 和我们的搭建平台(魔方)的配合以及二次生成能力如何助我们生成复用度更高的页面。本次分享从实践出发,结合实际场景来由浅入深地介绍 UI 智能生成代码的方方面面,帮助你找到业务提效的新思路。

演讲提纲:

1. 业务背景介绍

  • Nocode 搭建平台模板生成

2. 核心(布局)算法:ALYX

  • 算法 pipeline 设计
  • 循环处理
    • 循环节点间的匹配
    • 循环项:最大集?最小集?
    • 从循环项重新生成循环
    • 提取循环值
  • 基于模式(Pattern)的优化样式代码
  • 组件
    • 基于对象检测的组件识别
    • 组件到代码的转换

3. 利用二次生成能力生成可复用页面的实践

  • 二次生成能力的探索和实践
    • 单次生成的缺陷
    • 人工调整的介入
    • 实现:中间页和重布局算法
  • 生成易复用的模板页面的实践
    • 可复用模板页面的需求
    • 多场景 SOP 支持:模板生成 SOP
    • 设计稿->中间页->模板:流程演示

你将获得:

  • 了解 UI 智能生成代码的设计思路,复杂模块的细节
  • 学习如何在实践中用 UI 智能生成代码搭配 Nocode 搭建平台来解决具体问题

by 张所勇

转转
平台方向前端负责人

转转智能代码项目神笔马良自立项至今已有近两年时间,最初立项以 Sketch2Code为思路缘起,本着提升前端开发效率为目的进行了多个版本迭代,目前项目在转转内部进入公测阶段,年底将全面尝试替代 Sketch 切图工作。神笔马良相比业界智能代码项目,更看重生成代码的真正可用性和可维护性,在结构、样式、命名、组件拆分、节点循环等多方面进行了独特的思考与探索,本次将重点为大家分享神笔马良落地实践的案例,同时提供一些前端智能化技术难点的解决思路。

演讲提纲:

1. 神笔马良项目介绍

  • 项目背景与历程
  • 功能介绍
  • 项目架构

2. 业界进展与特点对比

  • 业界算法所处阶段分析
  • 各家平台的特点
  • 实际使用效果对比

3. 关键技术难点探索与解决

  • 循环节点的自动识别与处理
  • 组件的拆分和使用
  • 样式名的生成规范
  • 样式简化、继承和复用
  • 复杂背景图的拼图算法
  • 结合转转组件库的代码生成
  • 自动化 UI 还原度测试

4. 转转奢侈品业务落地实践

  • 项目背景
  • 样板页面
    • 全链路页面
    • 功能性页面
    • 活动性页面
  • 落地过程遇到的问题
  • 落地效果:80%+ 切图效率提升

5. 前端智能代码领域未来思考

你将获得:

  • 智能代码项目在非巨头公司内的研发落地历程
  • 对代码多场景真正可用率和可维护性的算法经验
  • 智能代码项目核心难点的解决方案

by 郭婧瑶 (镜肴)

阿里巴巴
前端技术专家

在云计算 ToB 领域,中后台系统的开发是前端开发工作的重中之重。业内现有的成熟开发模式海量物料、开箱即用、可视化搭建等等在不同的业务特点下各有利弊。智能化作为这些年比较热的话题,在后端推荐算法、IOT、搜索、监控等等领域已经广泛使用,但目前业内在前端方面的探索还处于初级阶段,前端如何使用 AI 技术、在哪些场景中使用、前端智能产品的产品形态等等都需要不断的探索、实践、试错。

前端智能化现阶段很多团队都在实践,但很容易走上“技术理想上很丰满,业务落地上很骨感”的境地。在我们实践的过程中,除了遇到大量的技术问题和挑战外,我们也在不断思考和研究,如何在技术和业务中找到平衡点,能够让UE、PD、SA、RD 等业务方的同学接受这套开发流程和模式,真正解决业务上的问题,提升研发效能和体验。这次就为大家分享我们内部的 Dumbo 智能研发平台的开发实践,希望可以给你带来开发和业务上的帮助。

演讲提纲:

1. 业务背景及困境

  • 云计算流量产品团队(ToB)业务特点
  • 业务与团队所面临的困境

2. 现有研发方式及思考策略

  • 业内成熟的开发模式和平台
  • 基于云产品能力及前端基础设施,业务技术团队如何破局

3. 面向中后台场景智能开发体验与实践

  • 中后台场景页智能识别方案及实践
    • 如何识别中后台页面 (样本制造器、自训练流程)
    • 技术上的难点与挑战
  • 智能代码生成方案及实践
    • 低代码转换(布局分析、依赖收集、Adapter)
    • 出码模块:如何生成可维护、高质量的源码
  • 实践过程中的产品形态探索
    • 研发模式升级 - 设研一体模式
    • 统一流程规范【需求在线SOP】
  • 业务落地
    • 阿里云流量产品业务中的工程实践,应用于流量产品包括云通信、CDN、视频云等多条业务线产研链路
    • 实践结果:研发提效 30% 以上

4. 对未来的思考与展望

  • 智能数据向导、智能设计生产、交互式逻辑场景

你将获得:

  • 了解智能化技术在阿里云中后台场景的应用实践
  • 了解不一样/前沿的前端开发体系/研发提效思路
  • 电话咨询

    联系电话:+86 18514549229
在报名过程中如有任何问题,欢迎微信扫描二维码联系我们的票务经理