HTML5和移动终端给前端开发带来的变化——近三年探索经验漫谈(论文资料).ppt

html5和移动终端给前端开发带来的变化 近三年探索经验漫谈 whoami 姓名 曹刘阳 阿当 blog 你可能错过了很多东西 前端进化的阶段 今天的主题 你正在关心哪些问题 模块化 requirejs commonjs 前端mvc backbone 新一代的js框架 angular css框架 bootstrap css预处理器 less sass js预处理器 coffeescript typescript js语言标准 ecmascript6 犀牛书 可维护性问题 tdd bigpipe 自主研发框架 移动前端开发 viewport touchevent hybrid phonegap jquerymobile 跨终端 响应式布局 兼容性问题 后端和脚本能力 node js express css3api transform3d animation html5新标签 article figure html5富媒体 video canvas2d webgl html5新api websocket webworker 工程化向左 产品化往右 模块化前端mvc新一代的js框架css框架css预处理器js预处理器js语言标准可维护性问题 css3apihtml5富媒体html5新apihybrid 前端工程师们的职责只是快速执行 技术驱动产品创新 我们是否做得太少 你埋头在哪儿 你可能错过的一些东西 https c9 io 我们在做的尝试 移动互联网下的web 移动互联网下的web 你想到了什么 响应式布局不用考虑ie低版本 放心使用html5输入终端由鼠标键盘变成了touch节约流量 多使用web字体和css代替图片viewportjquerymobilephonegap 等等 先泼盆冷水 来自flurry公布的最近一次调查报告 web已死 web前端还值得玩吗 值得玩 但玩法有变化 大众点评的案例 甲在app1中选择某餐厅 乙在app2中收到餐厅的链接 乙在内嵌网页打开餐厅页面 微信朋友圈 新浪微博 微信公众平台和服务号 微博游戏中心 qq空间android版的玩吧 uc浏览器的网页应用中心 百度轻应用 firefoxos firefoxmarketplace 宿主环境有极大的变化 broswertowebview brower提供的api是遵循w3c标准的 统一的 或者说近乎统一的吧 而webview宿主应用的sdk可能为web前端提供了各种千奇百怪的api 账号登录好友关系消息推送调用硬件打听话锁定横 竖屏定制分享banner的标题 内容 icon和链接隐藏功能按钮 碎片化的环境 极其复杂 不同分辨率 不同物理尺寸不同的操作系统 不同的系统版本号不同的输入设备不同的浏览器 不同的版本号不同的宿主环境 不同的sdkandroid工程师说他们碎片化 web前端工程师们笑了 我们的尝试 拉取用户微信信息以及通过微信传播 从微信外的渠道往微信里拉呢 如何让你的app被用户发现 你是怎么下载app的 渠道为王 有流量的应用平台非常少 和应用数量远不成正比有效的推荐位非常紧张 基本排名100之外就很难被用户发现你听过刷榜多少钱一天吗 你听过联运的门槛和分成比例吗 新的思路 借助web推试玩版 引导下载 绕开渠道的高门槛和分成先试用 再决定是否下载 我们的尝试 关于hybrid和html5的一些思考 2010年移动互联网迅速崛起 html5同样在2010年发热 技术圈内 技术选型和长远发展 1 未来很快会淘汰掉吗 delphi flex silverlight flashbanner 闪客 html5能够在未来十年内坚挺吗 2 技术深度要求够吗 csser jser phper html5能够将b s的产品形态做到什么程度 技术门槛可以提到多高 3 高薪的理由 时髦带来的稀缺vs小众带来的门槛vs深度带来的经验沉淀 移动开发人员是否会迅速补上 多年的知识积累是否放弃 再论b s结构优点 免安装 升级透明 跨终端 曾经我以为webapp会和nativeapp正面激战 所以我做了这样的尝试 和这样的尝试 但webapp时机尚不成熟 我们遭遇了一系列问题 跨终端带来的碎片化问题手机厂商定制浏览器问题web标准未定稿 变化带来的问题性能问题浏览器bug和对标准支持力度带来的问题缺少webapp渠道问题用户习惯需培养的问题支付问题锁定横竖屏和全屏问题 说多了都是泪 环境什么时候会成熟 webapp什么时候会井喷 2011年的时候 我以为会是2012年2012年的时候 我以为会是2013年2013年的时候 我以为会是2014年转眼过去三年了 现在如果你再问我 我会说 不知道 也许三年之后又三年 三年之后又三年 一些人的妥协 hybrid jquerymobile phonegapcanvas canvas加速插件 phonegap 我的顾虑 但appstore不让上架和nativeapp相比 虽开发成本可降低 但面向用户优势何在 这算是认输吗 改为nativeapp做嫁衣 再论b s结构优点 免安装 升级透明 跨终端 不做敌人 不做家仆 做个互补的朋友 不以webapp方式硬碰不以hybrid方式服务发挥免安装优势 以内嵌webview的方式做个合而不同的朋友 也许 这才是移动互联网时代 web的最佳出路 之前准备好的工程化问题概览 html5在gui方案上的两个大分支 dom还是canvas 完全不同的两条路 html5的2d游戏引擎 核心部分支持canvas和dom两种不同模式容器封装事件封装影片剪辑碰撞检测全局时间轴调试loader 插件部分 a星寻路 插件部分 2 5d 插件部分 2 5d结合a星寻路 插件部分 向量运动 插件部分 物理引擎 如何兼容不同终端的分辨率 基于css的动画和3d 基于js和canvas webgl 的动画和3d 这个游戏需考虑和暴露出的问题 这个游戏需考虑和暴露出的问题 下次 找个机会咱们再聊吧 如果你们还感兴趣的话 几年前的web2 0时代 我的一位老同事曾经感叹说 前端技术能力的高低 很大程度上比的是各种小知识点的数量 攒豆能力 在投入h