- 本月热门
-
DesignInTec:科技里的设计（当设计师参与创业） by 前田约翰 -
AngularJS the performance parts(AngularJS性能：过去现在和未来) by toddmotto -
高性能LAMP程序设计 by 超群 -
论 Python 与设计模式 by 赖勇浩 -
响应性界面设计与开发[各种设备的兼容开发] by 张克军@豆瓣 -
漫游设计模式 by 大飞 -
面向未来的友好设计-响应式设计 by bennyzhai@腾讯 -
微架构设计之微博计数器服务 by 杜传赢 -
信息及可视化设计简介 by 郭俊 -
How to build a content and social media engine[如何构建内容和社交媒体营销引擎] by by Marcel Santilli
第1页
设计开发实效 Web2.0 应用程序
朱可 (@shawnzhu) 软件工程师 IBM 中国开发实验室新兴技术中心
朱可 (@shawnzhu) 软件工程师 IBM 中国开发实验室新兴技术中心
第2页
内容概况
从实际出发看 Web2.0 应用程序开发
• 趋势和主题 • 从核心问题入手 • 实用主义观点 • 工具和技能
从实际出发看 Web2.0 应用程序开发
• 趋势和主题 • 从核心问题入手 • 实用主义观点 • 工具和技能
第3页
Web2.0: 2010
• 社会网络与社会化游戏 • 在线Web应用程序商店 • 微博客 • 在线商店和在线支付 • 基于位置和地理信息的应用 • 互联网电视、在线电影和视频
Copyright 2010 © IBM Corporation
• 社会网络与社会化游戏 • 在线Web应用程序商店 • 微博客 • 在线商店和在线支付 • 基于位置和地理信息的应用 • 互联网电视、在线电影和视频
Copyright 2010 © IBM Corporation
第4页
Web2.0 开发的核心问题
• 更多的用户数量 • 更多的在线任务 • 越来越多的相互联系的数据 • 安全威胁与隐私保护 • 新的客户端平台
• 更多的用户数量 • 更多的在线任务 • 越来越多的相互联系的数据 • 安全威胁与隐私保护 • 新的客户端平台
第5页
Web2.0 开发新主题
基于Web的开放编程接口 大规模数据分析 云计算 移劢Web
基于Web的开放编程接口 大规模数据分析 云计算 移劢Web
第6页
Web 应用程序之实用主义观点
• 用户体验 (User experience) • 成本 (Costs) • 系统复杂度 (System complexity) • 可测试的系统 (Testable system) • 行劢敏捷 (Do things agile)
• 用户体验 (User experience) • 成本 (Costs) • 系统复杂度 (System complexity) • 可测试的系统 (Testable system) • 行劢敏捷 (Do things agile)
第7页
用户体验
第8页
“It's the Customer, Stupid!”
• 简单易用的用户体验设计
• 清晰的信息架构
• 多重访问渠道
• 浏览器
移劢设备同步应用
API 访问 (如 OpenSocial)
(http://thepcsecurity.com/use-multiple-browsers-to-ensure-internet-security/)
(http://en.wikipedia.org/wiki/OpenSocial)
• 简单易用的用户体验设计
• 清晰的信息架构
• 多重访问渠道
• 浏览器
移劢设备同步应用
API 访问 (如 OpenSocial)
(http://thepcsecurity.com/use-multiple-browsers-to-ensure-internet-security/)
(http://en.wikipedia.org/wiki/OpenSocial)
第9页
简单易用的用户体验设计
保持一致的 UI 模型 • Yahoo! Design library • Dijit from Dojo toolkit • jQuery widget 提供反馈信息 保持简洁
(http://developer.yahoo.com/ypatterns/selection/autocomplete.html)
(http://ajaxian.com/archives/dissecting -dijit-dojo-widgets)
保持一致的 UI 模型 • Yahoo! Design library • Dijit from Dojo toolkit • jQuery widget 提供反馈信息 保持简洁
(http://developer.yahoo.com/ypatterns/selection/autocomplete.html)
(http://ajaxian.com/archives/dissecting -dijit-dojo-widgets)
第10页
用户体验设计之 IBM OneUI
<link rel="stylesheet" href="/static/css/core.css" type="text/css"/> <link rel="stylesheet" href="/static/css/defaultTheme.css" type="text/css"/> … <body class="lotusui"> …
描述 CSS 和 HTML 结构 • 通用布局 • UI 组件 • 主题
<link rel="stylesheet" href="/static/css/core.css" type="text/css"/> <link rel="stylesheet" href="/static/css/defaultTheme.css" type="text/css"/> … <body class="lotusui"> …
描述 CSS 和 HTML 结构 • 通用布局 • UI 组件 • 主题
第11页
Logo Title
Filters Footer
清晰的信息架构设计
Category Navigation tab
Tips & wizard
Common links
Filters Footer
清晰的信息架构设计
Category Navigation tab
Tips & wizard
Common links
第12页
信息架构设计之HTML文档参考
<body> <header><nav><!-- navigation --></nav></header> <aside><!-– filters in tag cloud --></aside> <div> <section><!-– tips --></section> <section><!–- content list --></section> <!–- other sections --> </div> <footer><!-- declaration --></footer>
</body>
<body> <header><nav><!-- navigation --></nav></header> <aside><!-– filters in tag cloud --></aside> <div> <section><!-– tips --></section> <section><!–- content list --></section> <!–- other sections --> </div> <footer><!-- declaration --></footer>
</body>
第13页
通过良好的架构管理系统复杂 度，控制运营成本
第14页
实效Web2.0应用程序架构
• 应用设计原则分离关注点
– 会话(session)信息的保存
负载平衡器
– 事务与数据一致性检查
– 可用性
Web应用
Web应用
– 规模化
Web容器
Web容器
– 数据存储 – 可管理性
缓存
主数据库 从数据库
典型Web2.0应用程序架构参考
• 应用设计原则分离关注点
– 会话(session)信息的保存
负载平衡器
– 事务与数据一致性检查
– 可用性
Web应用
Web应用
– 规模化
Web容器
Web容器
– 数据存储 – 可管理性
缓存
主数据库 从数据库
典型Web2.0应用程序架构参考
第15页
使用云计算基础设施部署 Web 应用
• 弹性基础设施
• 按需支付 • 高可伸缩性 • 海量数据存储 • 管理与监视能力
Public Network
Amazon Elastic Load Balancing
WebSphere sMash On Amazon EC2
Amazon S3 (Elastic CDN)
Amazon RDB Amazon SimpleDB WebSphere sMash + Amazon Web Servi1c5es
• 弹性基础设施
• 按需支付 • 高可伸缩性 • 海量数据存储 • 管理与监视能力
Public Network
Amazon Elastic Load Balancing
WebSphere sMash On Amazon EC2
Amazon S3 (Elastic CDN)
Amazon RDB Amazon SimpleDB WebSphere sMash + Amazon Web Servi1c5es
第16页
在云计算平台上开发 Web 应用
使用方便但选择有限 • Google AppEngine: Python or Java • Sina AppEngine: PHP
按使用率付费
使用方便但选择有限 • Google AppEngine: Python or Java • Sina AppEngine: PHP
按使用率付费
第17页
可测试的系统 “Test when possible.”
第18页
测试 Web2.0 应用程序
“Test twice, write once.”
普及单元测试 • JUnit, Ruby ‘test/unit’, Python ‘unittest’, PHPT 功能测试 • django.test.client.Client • curl • java.net.URLConnection 性能测试 • Apache JMeter, LoadRunner 集成测试 • Selenium
“Test twice, write once.”
普及单元测试 • JUnit, Ruby ‘test/unit’, Python ‘unittest’, PHPT 功能测试 • django.test.client.Client • curl • java.net.URLConnection 性能测试 • Apache JMeter, LoadRunner 集成测试 • Selenium
第19页
工具和技能
• 新兴编程语言 • 云计算技术 • 新兴数据库技术 • 可复用的组件服务
• OpenID, Online Map, Google search, 在线 相册, 在线文件分享，即时通信服务(XMPP, Wave)
• 新兴编程语言 • 云计算技术 • 新兴数据库技术 • 可复用的组件服务
• OpenID, Online Map, Google search, 在线 相册, 在线文件分享，即时通信服务(XMPP, Wave)
第20页
选择数据库
• 关系型数据库
• 最为常用，面向结构化数据的查询和编辑
• 非关系型数据库(NoSQL)
• 列数据库: HBase, Cassandra • 键值对数据库: CouchDB, MongoDB, AWS
SimpleDB • 内容数据库: JCR, AWS S3
提示： 只有在 SQL 数据库无法满足功能性需要时，再选择 NoSQL 数据库
• 关系型数据库
• 最为常用，面向结构化数据的查询和编辑
• 非关系型数据库(NoSQL)
• 列数据库: HBase, Cassandra • 键值对数据库: CouchDB, MongoDB, AWS
SimpleDB • 内容数据库: JCR, AWS S3
提示： 只有在 SQL 数据库无法满足功能性需要时，再选择 NoSQL 数据库
第21页
行劢敏捷
第22页
敏捷风格的开发过程
原则
• 尽早、经常地交付可用的软件 • 保持简单
方法论
• DRY – Don’t repeat your self • 尽可能多地测试 • 代码重构与设计重构 • 从错误和失败中学习
原则
• 尽早、经常地交付可用的软件 • 保持简单
方法论
• DRY – Don’t repeat your self • 尽可能多地测试 • 代码重构与设计重构 • 从错误和失败中学习
第23页
Web2.0 应用程序的安全
提防安全漏洞保护 Web 应用
• XSS (跨站脚本) • CSRF (跨站请求伪造)
使用开放安全协议保护用户隐私
• 使用 SSL 加密通信传输 • 使用 OpenID 管理用户身份信息 • 使用 OAuth 与第三方服务交换数据
提防安全漏洞保护 Web 应用
• XSS (跨站脚本) • CSRF (跨站请求伪造)
使用开放安全协议保护用户隐私
• 使用 SSL 加密通信传输 • 使用 OpenID 管理用户身份信息 • 使用 OAuth 与第三方服务交换数据
第24页
小结
• 简单易用的用户体验设计 • 通过良好的架构管理系统复杂度，控制运营成本 • 构建可测试的系统 • 把握敏捷行劢的原则和方法 • 注重应用程序安全和用户隐私
• 简单易用的用户体验设计 • 通过良好的架构管理系统复杂度，控制运营成本 • 构建可测试的系统 • 把握敏捷行劢的原则和方法 • 注重应用程序安全和用户隐私
第25页
• Yahoo! Design Library • Amazon Web Services • IBM OneUI • Dojo toolkit • Projectzero 开发社区 • NoSQL
参考信息
参考信息
第26页
© IBM Corporation 2010. All Rights Reserved. The workshops, sessions and materials have been prepared by IBM or the session speakers and ref lect their own views. They are provided f or inf ormational purposes only, and are neither intended to, nor shall have the ef f ect of being, legal or other guidance or advi ce to any participant. While ef f orts were made to verif y the completeness and accuracy of the inf ormation contained in this presentation, it is provided A S IS without warranty of any kind, express or implied. IBM shall not be responsible f or any damages arising out of the use of , or otherwise related to , this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the ef f ect of, creating any warranties or representations f rom IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM sof tware. Ref erences in this presentation to IBM products, programs, or services do not imply that they will be available in all countr ies in which IBM operates. Product release dates and/or capabilities ref erenced in this presentation may change at any time at IBM’s sole discretion bas ed on market opportunities or other f actors, and are not intended to be a commitment to f uture product or f eature availability in any way. Nothing contained in these materials is intended to, nor shall have the ef f ect of, stating or implying that any activities undertaken by you will result in any specif ic sales, revenue growth or other results. Perf ormance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual th roughput or perf ormance that any user will experience will vary depending upon many f actors, including considerations such as the amount of multiprogramming in the user's job stream, the I/O conf iguration, the storage conf iguration, and the workload processed. Theref ore, no assurance can be given that an individual user will achieve results similar to those stated here. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and perf ormance characteristics may vary by customer. The f ollowing are trademarks of the International Business Machines Corporation in the United States and/or other countries: ibm.com/legal/copytrade.shtml AIX, CICS, CICSPlex, DataPower, DB2, DB2 Universal Database, i5/OS, IBM, the IBM logo, IMS/ESA, Power Systems, Lotus, OMEGAMON, OS/390, Parallel Sysplex, pureXML, Rational, Redbooks, Sametime, SMART SOA, System z , Tivoli, WebS phere, and z/OS. A current list of IBM trademarks is available on the Web at “Copyright and trademark inf ormation” at ibm.com/legal/copytrade. shtml. Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems In corporated in the United States, and/or other countries. IT Inf rastructure Library is a registered trademark of the Central Computer and Telecommunications Agency which is now part o f the Of f ice of Government Commerce Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Microsof t and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both. ITIL is a registered trademark, and a registered community trademark of the Of f ice of Government Commerce, and is registered in the U.S. Patent and Trademark Of f ice Intel and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and o ther countries. UNIX is a registered trademark of The Open Group in the United States and other countries. Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both.