FED

©FrontEndDev.org
2015 - 2024
web@2.23.0 api@2.21.1
2015阿里11.11:天猫前端浅谈 React Native与双11
12/1/2015, 10:34:34 AM
2015阿里11.11
访问
3659
·
评论
0
希望能透过react-native的动态性,将reactnative的优势带入客户端,如手淘、手猫,让使用客户端浏览体验更佳,并且保持动态性,快速协助响应业务。斑马(页面搭建平台)是一套让非技术人员也能自行搭建页面的CMS系统,基于Node实现,由天猫自主开发,此系统支持PC/Mobile页面,ReactNative整入后,让页面搭建上同步产出PC/Mobile/Native版本。ReactNative原设定为应用级别,让整个应用都使用ReactNative,但对于手淘、手猫这类应用已经有大量业务跑在线上,无法进行一次性的迁移,在@一渡、@隐风等人的努力下,将原先以应用为单位细化以页面为单位,让使用上更佳灵活,让部分页面使用,不需要侵入整个系统。...
2015阿里11.11:天猫双11页面服务容灾方案
12/1/2015, 10:33:10 AM
2015阿里11.11
访问
1760
·
评论
0
会场活动页,承载了促销商品导流功能,是消费者的购物入口,在双11活动中的地位可谓重中之重。保障活动页的快速稳定可用,是非常非常重要的。这次天猫双11会场页面渲染由wormhole来承担(wormhole本身会在后续的文章中详细介绍),下面介绍一下wormhole的容灾方案。wormhole主要消耗性能的地方就在模板引擎渲染这部分,在并发访问量大的情况下,频繁的模板渲染会导致系统负载急剧飙升,导致响应延迟。为了保证大并发量下,足够快速的响应,针对的做了动态降频方案,具体的见下图:...
2015阿里11.11:天猫活动页面的性能优化
12/1/2015, 10:30:04 AM
2015阿里11.11
访问
1763
·
评论
0
无线优先从去年开始推行,今年更是全面无线化,双11无线业务成交拿到了不错的结果,性能也迈出了一大步,对比去年双十一页面整体load时间提升了2s秒左右,秒开率达到了70%;去年双11活动会场埋点几个页面的性能,onload均值在4.7s左右(实际情况应该在3-4秒),导致跳失率非常高。...
2015阿里11.11:前端的变革
11/28/2015, 10:23:40 AM
2015阿里11.11
访问
1611
·
评论
1
在这个双十一结束的点上,打算分享点东西,其实我一直乐意写些实在的技术点,因为不同环境里工程手段和团队发展很不一样。不过到这个双十一是我在阿里的第三个整年,我想把这些年里我们做的真正重要的事总结总结。在我来阿里之前,其实没太想过发布这个事情,在阿里的时候,也没想过发布方式是如此重要,不过最开始来的时候,听说前端跟服务端的配合方式吓了一跳:前端产出demo页面,服务端负责把参考html代码来写vm(就是velocity模板,阿里是用Java的),这个过程就是传说中的“套页面”了,这个过程往往不是那么愉快的,有时候服务端的同学会把标签嵌套搞错,前端出了bug,则需要服务端重新改模板。这个模式我一开始确实觉得不妥,但是并没有把它当做非常严重的事情而,直到后来回忆起来,我才知道当时的想法错的有多么离谱。...
2015阿里11.11:小白的双十一之旅
11/28/2015, 10:21:45 AM
2015阿里11.11
访问
1504
·
评论
0
从以前的双十一作为用户买买买到今年终于加入到了双十一中,觉得还是需要记录一下所感所想,今年双十一我主要负责行业市场的氛围相关的需求,淘友新增的双十一的页面,以及need项目的相关页面,下面我就只针对行业市场来做一些总结吧。大约从9月份开始,我所在的行业市场团队就已经开始把双十一的需求提上日程了。我所负责的双十一的需求其实并不难,只是在现有的一些场景下透出双十一的氛围,不过由于行业市场所涉及的页面比较多,所以开发过程中很琐碎,下面是在整个开发过程中经过的几个历程:...
2015阿里11.11:如何为用户省电
11/28/2015, 10:20:01 AM
2015阿里11.11
访问
1311
·
评论
0
21世纪的基本生理需求应该是电源和wifi了。有电有网,“基情四射”;没电没网,只能“左手右手”了。随着HTML5以及CSS3技术支持与发展,以及手机越来越高性能带来的可行性。移动端的页面显然会越来越烧电。用户一旦感觉到浏览这破页面手机电量流失很快,很大程度生会影响用户的浏览质量,继而影响转化率,甚至用户丢失。...
2015阿里11.11:Flint探秘
11/28/2015, 10:13:30 AM
2015阿里11.11
访问
1997
·
评论
1
前端逐年发展,从实现刀耕火种的纯静态页面,到开发复杂交互的前端应用,各种框架、自动化工具层出不穷。在国内的前端界忙着造MVVM的轮子、为选择哪家框架而斗嘴的时候,国外的团队已经开始思考开发体验的优化了。手淘前端内部目前比较流行的工作流,是MVVM框架+各种第三方库+NPM包管理+Gulp流+Webpack打包+本地服务器+HotLoader插件或者是LiveReload插件,再配合上喜欢的编辑器、浏览器。从上古时期的写完HTML、CSS、JavaScript,直接浏览器刷新,慢慢发展到今天需要编译的自动化工作流,前端开发的能力上了一个台阶的同时,复杂性也逐年升高,越来越“折腾”。...
2015阿里11.11:vue+webpack 的技术实践
11/25/2015, 12:08:37 AM
2015阿里11.11
访问
4697
·
评论
2
双十一中,无线前端的产品可以说非常的丰富。在双十一中,互动始终是重头的一部分,但是与以往不一样的地方是,导购产品在本次双十一中有着不俗的表现。而今年的双11导购业务占据了5大模块里的后三个,除了必抢,其它业务均是由手淘的同学来完成的,笔者作为导购产品的一员,选择导购产品来给大家解读其中的技术实践。...
2015阿里11.11:手机淘宝基础业务前端技术的演进
11/25/2015, 12:04:42 AM
2015阿里11.11
访问
1716
·
评论
0
自从11.11这个曾经普通的日子被阿里塑造成一年一度的消费者和商家的节日,阿里的技术小二们就多了一个每年练兵的好机会.在经历了峰值流量的考验后,双十一对于阿里更成为一个打破部门间隔阂,推动业务和技术更新的绝好机会.且日期恰逢年关将近,我想这也是总结团队一年来技术演进的好机会.我们在13年底完成了开发模式上的前后端分离,从那时起前端项目就不再仅作为Web项目的一部分进行管理.独立于服务端的开发和发布过程也催生出了我们的前端项目工程化之路....
2015阿里11.11:手淘Promise实践
11/25/2015, 12:03:01 AM
2015阿里11.11
访问
1609
·
评论
0
之前较早的时候,在我们团队中已经陆续分享过几次Promise的实践,主要分享了Promise的常用特性,包括then/catch,链式调用等。而本次借双11技术巡演的机会,主要结合手淘前端的一些日常业务,来阐述Promise的编程模式。笔者对Promise的态度是极其推崇的,不仅仅因为它能被完美的Polyfill和解决异步调用的问题,更从ES6/7的发展来看,Promise有更大的用武之地(ES6的generator以及ES7的async/wait)。...
2015阿里11.11:HTML5性能最佳实践
11/25/2015, 12:01:10 AM
2015阿里11.11
访问
4097
·
评论
1
2015年是全面『无线化』的一年,在BAT(财报)几家公司都已经超过50%的流量来自移动端,这次双11更是占到了68.67%无线交易(天猫微博)。手淘中大量的业务采用H5的方式开发,H5体验好坏全面影响着手淘的使用体验。今年手机淘宝在技术上重点解决“顿”,“卡”,“慢”的问题,并提出了“521法则”,具体指:...
2015阿里11.11:密令红包的前端技术方案
11/24/2015, 11:55:20 PM
2015阿里11.11
访问
1600
·
评论
0
今年的双11不仅买买买令人兴奋,密令红包也让人欲罢不能、抢到手软。每天,都有新鲜出炉的密令从各种渠道放出,只要打开手机淘宝,在搜索框输入密令就可以抢现金红包啦~一年一度的红包盛事没有彩蛋怎么行呢?输入秋裤、冰箱、手机膜试试看?哎呀我的手机怎么这样了?...
2015阿里11.11:手淘敲钟项目总结
11/24/2015, 11:51:18 PM
2015阿里11.11
访问
2815
·
评论
1
4号得到消息要做一个紧急项目,双十一当晚10点30分,北京水立方,美国纽约证券交易所为“2015天猫双十一全球狂欢节”举行远程开市敲钟仪式,见证这场全球商业的狂欢。到时马大大会和8位曾获得阿里公益“天天正能量”奖的人物代表举行远程开市敲钟仪式,这是纽交所首次为一家中国的互联网企业举行远程敲钟仪式。我负责在手淘上开发一个敲钟功能,让手淘的一亿多用户能够在手机上和马总一块敲响开市钟。...
移动端web app自适应布局探索与总结
11/4/2015, 9:56:20 AM
访问
2228
·
评论
2
在这之前做webapp开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640*1136标准,所以高度一般取个大概值,各种图标的宽高也是取平衡值写死,然后部分样式通过媒体查询来设置,例如背景图的多倍图、基础字体大小、图标宽高。这样做的弊端很明显:...
MongoDB 学习三:查询操作
9/14/2015, 10:54:21 AM
MongoDB 学习
访问
1601
·
评论
1
这章我们学习MongoDB的查询操作。find方法用于执行MongoDB的查询操作。它返回collecion中的documents子集,没有添加参数的话它将返回整个collection数据。例:查找c的所有数据...
MongoDB 学习二:基本操作
9/9/2015, 4:26:51 PM
MongoDB 学习
访问
1675
·
评论
2
这章我们学习数据操作。上一章我们已经简单介绍了数据插入,如:那么,假如你碰到需要插入多条documents的时候情况怎么办呢?只要传入数组就行MongoDB在插入数据的时候仅做最少的检查。它检查document的基础结构并且"_id"不存在时帮你自动添加。...
MongoDB 学习一:概念
9/9/2015, 4:20:36 PM
MongoDB 学习
访问
1424
·
评论
0
这一章,我们先介绍几个MongoDB的概念:1.document:它是MongoDB的基础数据单元,它大概等价于关系型数据库中的行。2.collection:可以想象成动态的表。3.一个简单的MongoDB实例可以携带多个独立的数据库,每个数据库都有属于自己的collections。...
coolie 心中的前端构建
9/9/2015, 3:28:51 PM
coolie介绍
访问
2863
·
评论
3
前端开发为什么要进行构建,它的意义在哪?回答这个问题之前,来先看下两个案例案例1案例2因为案例1的教训,使用了CDN技术。接触过前端开发的同学,肯定对这两个案例颇有感触,因为这两个案例是最为常见的。...
在自然语言的角度理解 JavaScript 中的 this 关键字
9/8/2015, 12:49:55 PM
访问
1345
·
评论
3
在编写JavaScript应用的时候,我们经常会使用this关键字。那么this关键字究竟是怎样工作的?它的设计有哪些好的地方,有哪些不好的地方?本文带大家全面系统地认识这个老朋友。小明正在跑步,他看起来很开心...
为什么不是 200 OK (FROM CACHE) 而是 304 NOT MODIFIED
8/25/2015, 9:57:47 AM
访问
2297
·
评论
1
为什么有的缓存是200OK(fromcache),有的缓存是304NotModified呢?很简单,看运维是否移除了EntityTag。移除了,就总是200OK(fromcache)。没有移除,就两者交替出现。最近在做百度云观测的nginx配置优化。从知乎上看到这个问题:“阿里云存储如何让浏览器始终以200(fromcache)缓存图片?”,提问者强调200OK(fromcache)和304NotModified的区别,有感而发。...