web_app和html5给前端带来的变化——我们的html5游戏平台之旅

webapp和html5给前端带来的变化 我们的html5游戏平台之旅 WhoamI 姓名 曹刘阳 阿当 Blog 跑在浏览器里的联机游戏大厅 游戏列表 玩家后台和道具商城 房间列表和座位列表 各种类型的游戏 Webapp的优点 跨终端 一次开发到处运行 Webapp的优点 可集成至webappstore webmashup Webapp的优点 免安装 Webapp的优点 透明升级 Webapp的优点 WebApp的入口很多 数据都存在服务端 WebsiteVSWebapp Website Web的主流形式 数据展现驱动存取数据库列表页详情页登录验证 前端辅助Tabview模拟弹窗图片轮播Ajax Webapp Web的新锐 前端交互驱动新颖的交互方式更多的功能模块更大的代码规模模糊c s和b s 后端辅助没有跳转AjaxSocket数据持久性 Web的发展 webapp的机遇 js框架的发展和html5的到来 从技术上支持了前端进行类桌面应用的开发 模糊b s和c s结构的界线 前所未有的终端大战 一次开发到处运行的强烈需求 webapp的硬伤 移动终端对html5的支持力度不够 全屏 锁定横竖屏 访问硬件 性能移动支付 如何在移动终端的浏览器里付款发布渠道 webappstore何时登录ios和android桌面用户习惯的培养 b s结构的app需要大公司推出有力产品只能等 前途光明 但眼下却没有出路 尴尬的时期 Webapp的挑战 1 编程技巧的要求 更大的代码量更大的可维护性需求更深的团队协作需求你需要更强的框架 和更高水平的前端工程师 强大的framework 弥补语言层面的薄弱 原生js在语言层面薄弱jQuery的重点在library上 而非framework 远不够强大 强大的framework 弥补语言层面的薄弱 我们选择YUI3 地址 YUI3组织架构 YUI3的语言层支持 oop aop valuechangeEvent customEvent lazyload sandbox customModule jQuery之父和YUI3架构师的对话 NicholasC ZakasvsJohnResig一场关于YUI3 jQuery的精彩辩论 website的前端架构师与开发团队 前端架构需求 抽取通用组件设计模块化机制制定应用层范式制定全局规范 开发团队 开发团队需求 学习应用层范式学习通用组件api团队成员 以及架构师 无需深入沟通 避免冲突即可 架构师 webapp的前端架构师与开发团队 前端架构需求 抽取通用组件设计模块化机制制定模块范式应用层需求分析OO设计和API设计 开发团队 开发团队需求 学习模块范式学习通用组件API实现OO设计团队成员 以及架构师需深入沟通 架构师 前端编程的难度在哪 知乎 Web前端开发面临的挑战主要有哪些 3 倍于后端的开发时间 后端 抽象出类 设计API 编码前端 抽象出类 设计API 考虑css DOM js组合 编码 webapp不一定需要html5 html4一样可以开发webapp 同样面临编程技巧的挑战 Webapp的挑战 2 外部环境更多变化 比起web2 0时代 更多的浏览器html5的标准未最终确定 浏览器的支持在不停变化终端的碎片化 不同的物理尺寸 不同的分辨率你需要更多的测试设备 更多的hack技巧 和更多的debug时间 我们如何解决终端碎片化问题 主流解决方案 1 响应式布局 响应式布局优缺点 优点无dpi缩放 根据不同分辨率 在不同终端均用最合适的方式显示缺点沟通成本高 从交互设计 UI设计到前端工程师均需参与开发成本高 做大量嗅探 写多个分支未来的新的主流分辨率出现 需再增加分支 响应式布局真的是答案吗 沟通和开发成本高一次开发 到处运行 b s结构的优势是否大大消弱 主流解决方案 2 移动终端优先 移动终端优先优缺点 优点无dpi缩放 开发成本低 一次开发 到处运行缺点大分辨率下表现很糟 另一种思路 在viewport上做文章 主流思路 设置浏览器分辨率和机器分辨率一至 无dpi缩放 metaname viewport content width device width 如果放任dpi缩放会如何 metaname viewport content width 1024 我们的解决方案 统一viewport宽度 统一viewport宽度的注意事项 非ios下设置viewport宽度较麻烦不同设备的宽高比不同 统一满屏时的宽度值 则高度弹性 UI设计师设计时 要注意在高度上的弹性 全屏尺寸和安全区域尺寸 全屏与安全区域 全屏与安全区域 安全区域 统一viewport宽度优缺点 优点开发成本低 一次开发 到处运行在大分辨率下表现良好面向未来 自适应性良好缺点有dpi缩放 显示效果非最优大分辨率下 交互设计受制约小分辨率下 图片大小没有得到最大优化 利大于弊 开发成本骤降 donebetterthanperfect维护成本骤降设计成本骤降微笑面对新分辨率的出现viewport是浏览器送给前端工程师们的礼物 前端开发工程师 浏览器 前端在开发中的分层 前端在实践方面发展 HTML4 HTML5 HTML5来了 框架和应用层均需变化 jQuery2 x不支持ie9以下版本 预示一个时代的结束 jQuery2 x的瘦身 HTML5来了 新api带来的创意爆炸 CanvasWebsocketTransformGeolocation 探索新API的应用场景 是个类似发明的过程 是前端工程师们的责任 HTML5来了 GUI的选型 DOMorCanvas 完全不同的两条路 html5的大明星canvas canvas既强大 又弱小 是神器 也是不毛之地像素级控制 但也没了DOM和css的帮助非传统前端工程师 进入html5圈子的热门入口 基于canvas编程 完全不同的编程体验 没有css 没有容器 一无所有自己动手 封装一套API 模拟DOMNode封装CanvasNode HTML5来了 server端变化 http协议 客户端拉