SlideShare uma empresa Scribd logo
1 de 16
D2归来有感

By lordchen
移动Web开发   拔赤& 完颜




• 在移动的时代淘宝的前端何去何从

• Object-c 门槛很高,一个合格的oc开发非
  常贵。

• 更重要的是app的更新很繁琐,apple不高
  兴,你就玩不了。
响应式设计对前端的要求
•   布局宽度自适应
•   Viewport 参数
•   Media Query Css
•   Server side
•   移动设备上要习惯用touch代替click
HTML5 vs Native App




     http://phonegap.com/
移动web中的性能问题
          性能问题肯定更严峻也更重要
第三方广告稳定性和性能优化
           by 李牧


• 广告代码往往是一个外链js,在页面上输出
  一段html或者一个iframe。
• 带来两个问题
 – 会阻塞加载
 – 单点故障
<script>

document.write('<a style="display:none !important" id="t-a-{id}"></a>');

t_h = document.getElementsByTagName('head')[0];

t_s = document.createElement('script');

t_s.async = true;

t_s.src = 'http://{host}/{path}?i={pid}';

if(t_h)t_h.insertBefore(t_s,t_h.firstChild);

</script>
创意平台
大淘宝技术圈
淘宝开放产品前端实践-店铺

1.   装修的本质:基于模板的内容管理系统。
2.   店铺系统分为三个角色:店铺平台、卖家、设计师。
3.   淘宝店铺遇到了跟我们一样的问题-》新旺铺 前端白皮书
4.   完善的校验流程。
5.   把校验流程放到设计师这一环,是个很不错的主意。
6.   淘宝店铺尝试进入第三阶段,让设计师可以写js。
7.   安全问题很严峻,目前的解决方案不成熟,上线不可预期。
店铺开放JS

                                    编译后代码
                                    moduleResult___ =
     用户代码                    IMPORTS___.w___('el', (x0___ =
                              IMPORTS___.document_v___?
                                 IMPORTS___.document:
      var el =        编译
                            ___.ri(IMPORTS___, 'document'),
                               x0___.getElementById_m___?
  document.getEle               x0___.getElementById('id'):
   mentById(“id”) ;         x0___.m___('getElementById', [ 'id
                                           ' ])));


    静态分析代码



                      服务端
开放平台JS SDK


JAVA SDK   JS SDK

                    展现

                    数据

                    安全
D2归来有感

Mais conteúdo relacionado

Destaque

국야배당 【♥】♨Guu69,com(카톡: XAZA)【♥】♨ 국야분석 하키픽
국야배당 【♥】♨Guu69,com(카톡: XAZA)【♥】♨ 국야분석 하키픽국야배당 【♥】♨Guu69,com(카톡: XAZA)【♥】♨ 국야분석 하키픽
국야배당 【♥】♨Guu69,com(카톡: XAZA)【♥】♨ 국야분석 하키픽
tyhiuoi
 

Destaque (13)

Nisara Muni Segmentation
Nisara Muni SegmentationNisara Muni Segmentation
Nisara Muni Segmentation
 
Réussir son site internet communautaire - Christelle Dorat
Réussir son site internet communautaire - Christelle Dorat Réussir son site internet communautaire - Christelle Dorat
Réussir son site internet communautaire - Christelle Dorat
 
Confecciones
ConfeccionesConfecciones
Confecciones
 
국야배당 【♥】♨Guu69,com(카톡: XAZA)【♥】♨ 국야분석 하키픽
국야배당 【♥】♨Guu69,com(카톡: XAZA)【♥】♨ 국야분석 하키픽국야배당 【♥】♨Guu69,com(카톡: XAZA)【♥】♨ 국야분석 하키픽
국야배당 【♥】♨Guu69,com(카톡: XAZA)【♥】♨ 국야분석 하키픽
 
[Cluj] Information Security Through Gamification
[Cluj] Information Security Through Gamification[Cluj] Information Security Through Gamification
[Cluj] Information Security Through Gamification
 
Vashulenko 4klass
Vashulenko 4klassVashulenko 4klass
Vashulenko 4klass
 
Colonopatia estructural
Colonopatia estructuralColonopatia estructural
Colonopatia estructural
 
Population
PopulationPopulation
Population
 
Materi Presentasi Profile Universitas Airlangga (UNAIR)
Materi Presentasi Profile Universitas Airlangga (UNAIR)Materi Presentasi Profile Universitas Airlangga (UNAIR)
Materi Presentasi Profile Universitas Airlangga (UNAIR)
 
Etisalat : International Market Entry Strategies
Etisalat : International Market Entry StrategiesEtisalat : International Market Entry Strategies
Etisalat : International Market Entry Strategies
 
Frauds in telecom sector
Frauds in telecom sectorFrauds in telecom sector
Frauds in telecom sector
 
IRSF
IRSFIRSF
IRSF
 
Etisalat Digital Services
Etisalat Digital ServicesEtisalat Digital Services
Etisalat Digital Services
 

Semelhante a D2归来有感

淘宝开放产品前端实践
淘宝开放产品前端实践淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
 
Script with engine
Script with engineScript with engine
Script with engine
Webrebuild
 
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Gelis Wu
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路
taobao.com
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
 
Microsoft CNTK, Cognitive Toolkit 微軟深度學習工具
Microsoft CNTK, Cognitive Toolkit 微軟深度學習工具Microsoft CNTK, Cognitive Toolkit 微軟深度學習工具
Microsoft CNTK, Cognitive Toolkit 微軟深度學習工具
HO-HSUN LIN
 
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
ziggear
 
Kindeditor设计思路v2
Kindeditor设计思路v2Kindeditor设计思路v2
Kindeditor设计思路v2
luolonghao
 
2006年招聘试题
2006年招聘试题2006年招聘试题
2006年招聘试题
yiditushe
 
Node getting-started
Node getting-startedNode getting-started
Node getting-started
lylijincheng
 
建站大业,实战ASP.NET 4
建站大业,实战ASP.NET 4建站大业,实战ASP.NET 4
建站大业,实战ASP.NET 4
Cat Chen
 

Semelhante a D2归来有感 (20)

淘宝开放产品前端实践
淘宝开放产品前端实践淘宝开放产品前端实践
淘宝开放产品前端实践
 
Script with engine
Script with engineScript with engine
Script with engine
 
JdonFramework中文
JdonFramework中文JdonFramework中文
JdonFramework中文
 
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
Visual studio 2012 與 asp.net 4.5 (新功能與開發介紹) 第一天
 
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.xIntroduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
 
Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)
 
Microsoft CNTK, Cognitive Toolkit 微軟深度學習工具
Microsoft CNTK, Cognitive Toolkit 微軟深度學習工具Microsoft CNTK, Cognitive Toolkit 微軟深度學習工具
Microsoft CNTK, Cognitive Toolkit 微軟深度學習工具
 
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
 
Kindeditor设计思路v2
Kindeditor设计思路v2Kindeditor设计思路v2
Kindeditor设计思路v2
 
Ria lqj
Ria lqjRia lqj
Ria lqj
 
2006年招聘试题
2006年招聘试题2006年招聘试题
2006年招聘试题
 
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit TestingASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
ASP.NET Core MVC 2.2從開發到測試 - Development & Unit Testing
 
Node getting-started
Node getting-startedNode getting-started
Node getting-started
 
a glance of Javascript module
a glance of Javascript modulea glance of Javascript module
a glance of Javascript module
 
Programming in Objective-C
Programming in Objective-CProgramming in Objective-C
Programming in Objective-C
 
Backbone.js and MVW 101
Backbone.js and MVW 101Backbone.js and MVW 101
Backbone.js and MVW 101
 
建站大业,实战ASP.NET 4
建站大业,实战ASP.NET 4建站大业,实战ASP.NET 4
建站大业,实战ASP.NET 4
 
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
 

D2归来有感

  • 2. 移动Web开发 拔赤& 完颜 • 在移动的时代淘宝的前端何去何从 • Object-c 门槛很高,一个合格的oc开发非 常贵。 • 更重要的是app的更新很繁琐,apple不高 兴,你就玩不了。
  • 3.
  • 4.
  • 5. 响应式设计对前端的要求 • 布局宽度自适应 • Viewport 参数 • Media Query Css • Server side • 移动设备上要习惯用touch代替click
  • 6. HTML5 vs Native App http://phonegap.com/
  • 7. 移动web中的性能问题 性能问题肯定更严峻也更重要
  • 8. 第三方广告稳定性和性能优化 by 李牧 • 广告代码往往是一个外链js,在页面上输出 一段html或者一个iframe。 • 带来两个问题 – 会阻塞加载 – 单点故障
  • 9. <script> document.write('<a style="display:none !important" id="t-a-{id}"></a>'); t_h = document.getElementsByTagName('head')[0]; t_s = document.createElement('script'); t_s.async = true; t_s.src = 'http://{host}/{path}?i={pid}'; if(t_h)t_h.insertBefore(t_s,t_h.firstChild); </script>
  • 10.
  • 13. 淘宝开放产品前端实践-店铺 1. 装修的本质:基于模板的内容管理系统。 2. 店铺系统分为三个角色:店铺平台、卖家、设计师。 3. 淘宝店铺遇到了跟我们一样的问题-》新旺铺 前端白皮书 4. 完善的校验流程。 5. 把校验流程放到设计师这一环,是个很不错的主意。 6. 淘宝店铺尝试进入第三阶段,让设计师可以写js。 7. 安全问题很严峻,目前的解决方案不成熟,上线不可预期。
  • 14. 店铺开放JS 编译后代码 moduleResult___ = 用户代码 IMPORTS___.w___('el', (x0___ = IMPORTS___.document_v___? IMPORTS___.document: var el = 编译 ___.ri(IMPORTS___, 'document'), x0___.getElementById_m___? document.getEle x0___.getElementById('id'): mentById(“id”) ; x0___.m___('getElementById', [ 'id ' ]))); 静态分析代码 服务端
  • 15. 开放平台JS SDK JAVA SDK JS SDK 展现 数据 安全