风也温柔

计算机科学知识库

web前端开发最佳实践 pdf 新人开发者前端学习笔记

  GMTC 全球大前端技术大会关注前端、移动、AI 应用等多个技术领域,促进全球技术交流,推动国内技术升级。大会由 14 个主题专场组成,因为时间原因笔者根据个人兴趣有选择性地参加了部分专场,整理成大会参会笔记。主题演讲

  主题演讲中,最令人印象深刻的是 团队高级工程师于潇分享的《使用 快速构建集美观与高性能于一体的移动应用》web前端开发最佳实践 pdf 新人开发者前端学习笔记,他通过当前移动软件开发中常见的阻碍引出了 的项目背景与研发设计路线, 针对这类问题的创新思路、解决方式及其发展进程值得借鉴,讲师借助代码实例直观地演示了 的系统结构与开发使用体验。

  web前端开发自学还是培训_web前端开发最佳实践 pdf_党建web前端开发最佳实践

  web前端开发自学还是培训_web前端开发最佳实践 pdf_党建web前端开发最佳实践

  web前端开发最佳实践 pdf_web前端开发自学还是培训_党建web前端开发最佳实践

  对开发者及其友好的体验和媲美原生应用的性能使 热度激增,目前 项目在 上 start 数已破 3 万,来自阿里巴巴的闲鱼无线技术专家王树彬也介绍了闲鱼在没有先例的情况下将闲鱼商品详情页迁移到 的历程,不得不钦佩闲鱼技术团队的胆量与实力。相信大部分开发者都有引入新技术的追求,但只有充足的调研和强劲的技术实力才可以像闲鱼一样迅速地完成技术落地。

  掌众集团技术总监刘弟新分享了在海外网络环境不佳的情况下,针对多项目特点实现的离线缓存打包、更新、应用等方案web前端开发最佳实践 pdf,这些方案是基于多种能力从项目各个方面优化资源打包、缓存的实践。

  web前端开发最佳实践 pdf_web前端开发自学还是培训_党建web前端开发最佳实践

  来自百度总监高磊,以个人与所在团队为案例,为大家分析了关于前端工程师个人能力发展方向及路径的思考,指引大家如何确定前端团队的职责,并提出团队成长的关键因素是“结果可衡量”。业务的产出或者技术成果可以为团队争取更多的空间,前端开发者不仅可以解决业务问题提升用户体验,甚至还可以解决行业问题。

  PWA 和性能优化与监控

  除了主会场,笔者还参与了PWA专场和性能优化与监控专场的几个议题。

  阿里巴巴 UC 内核无线开发专家刘翔介绍了如何从 PWA 的核心能力入手,玩转 的技巧。借助 PWA 的优势使 Web 变得更可靠,UC 内核正在逐步给前端开放浏览器内核基础能力,甚至是操作系统能力,比如缓存、推送、添加桌面图标、下载、图片解码、渲染等等,以前很多 才能实现的需求,现在 Web 也有了相应的解决方案,如WebVR、 等。

  阿里巴巴前端技术专家彭伟春(六猴)分享的大前端时代前端监控的最佳实践,比较突出的是复现 JS ERROR 和性能报警事故现场的机制,通过增量的用户操作日志,可一对一复现用户操作,方便定位问题,日志采集 SDK 实现了跨多端如 /react /weex/ 端的数据采集。讲师还讲述了阿里云 ARMS 前端监控系统为双 11 保驾护航的实际案例。

  web前端开发最佳实践 pdf_web前端开发自学还是培训_党建web前端开发最佳实践

  百度高级研发工程师潘宇琪分享了在 PWA中 使用 App Shell 模型提升性能和用户感知体验的议题,介绍了 PRPL 模式和 App Shell 模型思想。在 PWA 中,使用 App Shell 模型将通用的资源与动态内容分离,可以实现对于用户的快速响应。

  web前端开发自学还是培训_web前端开发最佳实践 pdf_党建web前端开发最佳实践

  配合 实现在不同架构(SPA、MPA、SSR)下的 App Shell 的预缓存方案之后,在弱网甚至离线环境依然能给予用户可靠的浏览体验。另外,借助流行框架与构建工具的先进特性,开发者不必从头实现 App Shell 的全部细节。

  为了进一步提升用户感知体验,在 SPA 中可以使用 (骨架屏)减少白屏时间。宇琪提供了两种生成 的思路,一是编写额外组件通过 SSR 渲染展现,另一种是使用 渲染真实页面内容再自动用占位符进行替换。

  web前端开发自学还是培训_党建web前端开发最佳实践_web前端开发最佳实践 pdf

  UI与动画

  UI 与动画专场,大家提到的解决方案主要集中在 3d 图形处理绘制方向,包括游戏和一些全景产品的应用。分享的内容更多的是讲师自家产品遇到的问题和解决思路。

  首先是人送外号 “计算机之子”的 老师带来的前端与图形学的主题分享,他的分享里更多的是在介绍图形学的相关知识,虽然分享 PPT 里充斥着大量的数学公式和代码,但是整体讲演风格也还比较有趣。最后也不能免俗的介绍了下自家的两个开源产品 和 G3d。

  党建web前端开发最佳实践_web前端开发自学还是培训_web前端开发最佳实践 pdf

  来自白鹭引擎首席架构师王泽则跟大家介绍了如何进行游戏引擎的技术选型和一些常见的性能优化方案,笔者虽没有接触过游戏开发,但是通过这个分享大概了解了游戏引擎的基本概念和一些渲染 API 选型的优劣。这位讲师的语速极快,给人感觉信息密度极高。

  web前端开发自学还是培训_web前端开发最佳实践 pdf_党建web前端开发最佳实践

  谈到性能优化,王泽强调,“性能糟糕”在游戏产品上的表现主要有三种——“帧频很低”、“设备发热”、“不定期卡顿”。当我们提到性能糟糕的时候,首先应该先确认具体表现是什么,再来定向解决排查,有的放矢。

  web前端开发自学还是培训_党建web前端开发最佳实践_web前端开发最佳实践 pdf

  贝壳找房如视事业部工程负责人杨永林(微博@教主)向大家介绍了他们如何运用前端技术来提升产品的交互体验。并且通过两个产品例子向大家强调数据结构设计在复杂交互应用中的重要性 —— 一个精心的数据结构设计,可以减少大量不必要的重构和扩展的工作量。 同时讲师也分享了在改善产品交互性能中一些算法的应用。

  党建web前端开发最佳实践_web前端开发自学还是培训_web前端开发最佳实践 pdf

  UI与动画专场各位讲师都在不断强调性能优化。 显而易见,性能在交互动画中是一个非常重要的指标。通过各位讲师的介绍,我们也可以整理出来一些对产品交互进行性能优化的常用思路:

  清晰准确的描述和量化性能的表现,有助于更好的找到出现性能瓶颈的原因;拆解主体代码的执行过程,在每个小的节点上逐个击破;精心的数据结构设计和算法优化极大的促进了性能提升;当运行环境能提供的运行效率有限时,也可以考虑调用更底层的能力去满足需求和逻辑。总结

  交流和分享是提升技术能力以及活跃思维的有效途径,各位大牛的技术实践和解决方案分享干货满满,场场满座。众公司的新产品推广也反映了目前前端发展的趋势,即从多种角度提升用户及开发者的体验。以PWA技术为例web前端开发最佳实践 pdf,Web应用不需要重构而是通过渐进式的升级就可以提升安全、性能并获得接近原生应用的沉浸式体验,各大浏览器厂商或开发框架也在完善生态来支持开发者实现PWA。

  关于开发者

  开发者,依托于百度BOW( Open Web)技术团队,是一个专门的Web技术建设小组,致力于推动 Open Web 技术的发展,将不定期为读者同步W3C要闻。BOW 关注前端,关注Web;剖析技术、分享实践;谈谈学习,也聊聊管理。欢迎关注 开发者公众号,回复“加群”,加入我们,一起推动 技术的发展!

  文章来源:https://zhuanlan.zhihu.com/p/40612595