GithubHelp home page GithubHelp logo

fragment's Issues

移动框架选型

随着公司无线ALL IN,前端同学们或多或少都在接触一些无线的业务。
即使没做过无线的同学,基本上也听过关于无线开发的一些难点,比如省电、流量、速度、兼容性等等

这些点给我们的印象就是,我们开发的webapp就一定得更小,更快!
我觉得这个没问题,在PC上,我们也一直在探索怎么把这两点做到极致!

所以,很多之前用KISSY做PC开发的同学会有一点疑虑:做无线开发我们还用KISSY吗?
也有一些同学问我,KISSY有没有针对移动开发的版?
已经用了KISSY做移动开发的同学,KISSY的体积成为了他们的心病,因为zepto才9.2KB(when gzipped)

其实几周前,我也在纠结KISSY那几十KB的大小
还发起过一个讨论无线web性能衡量的一些标是什么?
经过一段时间的实践,关于这个问题我有一些自己的看法。
下面我通过一些数据和我的经验聊下我的看法。

关于兼容性代码

KISSY是一款全终端全浏览器支持的JavaScript框架。
所以大家一定会想,KISSY中一定有大量的兼容性代码,对于移动开发,这些代码都是多余的。
KISSY有兼容性代码没错,但是!做移动开发,其实我们只是不用兼容低版本IE,其他的兼容都还是需要的。
如果大家看过KISSY源码,KISSY是有条件加载的,在高级浏览器中,KISSY不会载入IE哪些兼容性代码。
虽然不是非常彻底,但是真没多出多少代码。
如果你不相信,认为彻底去掉IE的兼容性代码可以让体积压缩很多,我们可以看看JQuery。

jquery两个版本大小对比

  • jquery-1.10.2
  • 压缩前:273KB
  • 压缩后:93KB
  • jquery-2.0.3
  • 压缩前:242KB
  • 压缩后:84KB

大家都知道juqery2.x是不支持IE6/7/8的
压缩后体积相差9KB,这个差值比我想象的要少很多。
在功能相当的情况下,指望不兼容IE6/7/8就能让代码体积较少很多,貌似也不是很现实。

关于体积

KISSY常用的功能有seed,dom,evnet,node,anim,ajax,我看了下大小

  • KISSY Core(seed+dom+event+node+anim+ajax)
  • 压缩后:131(42+89)KB
  • GZIP: 47.9KB

功能类似的组合有seajs+jquery,seajs+zepto,我与KISSY core对比下大小

KISSY core,JQuery,ZEPTO,

zepto,jquery都加上了seajs 6.6KB

咋一看,在体积上KISSY位居榜首
不过这里得强调下,虽然功能类似,KISSY功能比另外两个强大很多。

很多是经常用到的功能,当然你也可以自己实现,但是你能保证稳定性,兼容性,以及向后兼容吗?

47.9到底有多大呢,有参照物或许能让你感觉更直观,以下数据都是gzip之后的数据。

KISSY core大小参照

KISSY core的体积与大部分网站的总体积比起来也还好
像etao这样的就显得略蛋疼,网站23%的大小是KISSY core的大小。

对于“大小”这事,看了上面的图,大家是不是有了更直观的认识?

有些同学说KISSY还是太大,这么大的体积,可能会导致手机运行变慢
这个假设我暂时没法反驳
但是,咱们来看看大名鼎鼎的sencha touch

打开这个demo你可以看到sencha touch的体积
http://cdn.sencha.io/touch/sencha-touch-2.3.1/built-examples/touchtomatoes/index.html

sencha-touch-all-debug.js(2.3.1)

  • 3.5M
  • 912KB(gzip)

是的,你没看错,是3.5M,gzip之后也有将近1M。

有些同学可能会说,环境不一样,老外用的手机好,网络也好!
手机好不好不是很清楚,网络确实比我们好。
但是,关于网络,我也正好有想吐槽的。

关于2G网络

2g网络真的很慢,可以去我写的demo体验一下
http://www.atatech.org/article/detail/11922/786

有些同学规划产品前,把2G网络当作一个首要的衡量标准,认为一定要保证2G网络的体验。
为了省几十KB的流程,甚至不惜砍功能,改方案!
真的有必要吗亲?

2G用户一个月30M流量,刷微信都来不够
你的产品对于这部分用户真的这么重要吗?
真的有必要为了他们牺牲3g,wifi用户的体验么?
我觉得可以多掂量一下!

有时候就应该分清主次,学会放弃,大踏步的迈出步子!!
据说即将发布的淘宝主客户端4.0版本不支持android2.3,android开发的同学是不是因此可以不用996了!

适合移动开发的前端框架

这个节标题是很多同学的一个疑问,但是这种说法是有问题的。
做框架选型,首先得看你的需求,只有适合某个需求的框架:

  • 如果仅仅是一个资讯类的适合手机终端的站点,例如sina.cn,那么你要考虑的是加载速度
  • 如果是一个功能复杂的webapp,你得考整体的虑架构和性能
  • 如果你要的是一个跨终端、跨浏览器的响应式解决方案,那么你就得考虑兼容性

如果你想找一个库同事解决上面所有问题,貌似不太显示,就是鱼和熊掌不可兼得。
简单分析下,很容易找到适合自己场景的:

  • 如果是第一种需求,zepto这种小库比较适合,反正也不会用到很多功能,就算是原生写,也没多少代码
  • 第二种需求,JQueryMobile,KISSY,Sencha这样的框架是个不错的注意。你需要用到大量的特性,组件支持,还要保证项目的架构稳定。
  • 第三种需求,我暂时还没有想到比KISSY更好的 :)

反正很难有一个库满足所有需求,所以一切皆权衡!!

关于KISSY for mobile

有一个好消息,风驰团队发起了一个KISSY MINI的分支项目,目标是功能比seajs+zepto强大,但是体积与他们相当。
等这个项目发布,做一套这样简单的展示型的网站再也不用纠结了

按照承玉的思路,KISSY本身近期应该还是会以全终端全浏览器兼容的思路发展。
不过承玉近期主要的工作都是在做移动相关的组件支持,到时候会提供一整套webapp的解决方案,有需求的同学敬请期待吧!

最后

上面说了这么多,真的不是在忽悠大家用KISSY
只是想让大家有一个清醒的,直观的认识。

如果你觉得seajs,zepto,jquery,sencha中的任何一个更适合你的需要场景
放心大胆的用,不用纠结这纠结哪的
那个产品不是几个月重构一次,有问题了咱再改
不要为了几十KB的体积纠结得饭都吃不下
放心大胆大踏步的去做!
阿里无线起步晚,现阶段,我们最重要的任务是把步子迈出去,把产品做出来!!

移动开发测试&调试总结

个人觉得做移动web开发,80%以上可以在PC浏览器中搞定,另外20%可以就需要再模拟器或者真机上去调试了。
因为做移动web开发的时间也很短,所以也没有特别丰富的经验,暂时只能从以下三个方面说下自己积累的东西:

  1. 测试基准
  2. 测试工具
  3. 经验技巧

测试基准

与PC端开发一样,移动端开发也面临不同平台,不同设备,不同版本浏览器兼容性问题,一个产品基本上无法做到全平台兼容,所以我们必须根据实际情况定义自己产品的测试基准。

**什么是浏览器测试基准:**
浏览器测试基准是为产品测试提供的浏览器兼容测试的平台标准。这个基准主要是为QA团队的兼容测试提供数据指导。基准需要尽可能的涵盖当前绝大多数的操作系统和浏览器平台,并能兼顾平台发展趋势。

定义测试基准需要有数据支持,推荐一些监控平台

推荐其他团队定义的测试基准

测试&调试工具

工欲善其事,必先利其器。掌握一些必要的工具能大大提高我们的效率。

兼容性列表

KISSY for touch

KISSY for touch

为了KISSY能更好的支持移动开发,承玉作为技术支持加入到了detail多终端项目中,对KISSY做了不少改进和组件上的支持
今天主要讲讲KISSY这方面的特性,这些特性是基于KISSY1.4.0的(目前的稳定版是1.3.0)
你可以直接pullKISSY主干代码

https://github.com/kissyteam/kissy

也可以直接引用我发布的CDN版本

//KISSY1.4dev 版
http://g.tbcdn.cn/tb/item-touch/0.2.2/kissy/seed.js

-------------------万恶的分割线---------------------

更细粒度的模块颗粒

相对于1.3,KISSY1.4最大的变化是将不在有 kissy.js 这个文件,只有seed.js
seed.js只包含lang,loader等基础模块。
对于移动终端,特别是phone,KISSY.js这样的大文件已经不能满足用户的个性化需求
据说承玉还有对ajax,anim等模块拆分的计划

以后这么使用KISSY

    <script src="//g.tbcdn.cn/??kissy/k/1.4.0/seed-min.js" charset="utf-8"></script>
    <script>
        KISSY.add(function(S,DOM,Event,Anim,Ajax,Noe,Base){
            //your code
        },{
            requires:["dom","event","anim","ajax","node","base"]
        })
    </script>

看到这段代码后,有人会有两个疑问

  • 链接数太多
  • requries信息太长,写起来不方便

针对这两个问题,KISSY做了一些优化

  • 增加data-config="{combine:true}",自动合并KISSY请求
  • 增加requrie方法

代码修改如下:

    <script src="//g.tbcdn.cn/??kissy/k/1.4.0/seed-min.js" charset="utf-8" data-config="{combine:true}"></script>
    <script>
KISSY.add(function(S){
        var DOM = S.require('dom'),
            Event = S.require('event'),
            Anim = S.require('anim'),
            Ajax = S.require('ajax'),
            Node = S.require('node'),
            Base = S.require('base');

        //your code
 },{
requires:['dom','event','anim','ajax','node','base']
 })
    </script>

特性检测

移动设备开发中,经常会用到touch event,transition,transform等,怎么知道当前设备是否支持这些属性呢,其实KISSY早就实现了,只是在文档没有体现。

这里不一一列举,直接贴出KISSY的实现代码,不清楚的东西可以顺便看下实现

/**
 * @ignore
 * detect if current browser supports various features.
 * @author [email protected]
 */
(function (S, undefined) {
    var Env = S.Env,
        win = Env.host,
        UA = S.UA,
        VENDORS = [
            '',
            'Webkit',
            'Moz',
            'O',
            // ms is special .... !
            'ms'
        ],
    // nodejs
        doc = win.document || {},
        documentMode = doc.documentMode,
        isMsPointerSupported,
        transitionProperty,
        transformProperty,
        transitionPrefix,
        transformPrefix,
        documentElement = doc.documentElement,
        documentElementStyle,
        isClassListSupportedState = true,
        isQuerySelectorSupportedState = false,
    // phantomjs issue: http://code.google.com/p/phantomjs/issues/detail?id=375
        isTouchEventSupportedState = ('ontouchstart' in doc) && !(UA.phantomjs),
        ie = documentMode || UA.ie;

    if (documentElement) {
        if (documentElement.querySelector &&
            // broken ie8
            ie != 8) {
            isQuerySelectorSupportedState = true;
        }
        documentElementStyle = documentElement.style;

        S.each(VENDORS, function (val) {
            var transition = val ? val + 'Transition' : 'transition',
                transform = val ? val + 'Transform' : 'transform';
            if (transitionPrefix === undefined &&
                transition in documentElementStyle) {
                transitionPrefix = val;
                transitionProperty = transition;
            }
            if (transformPrefix === undefined &&
                transform in documentElementStyle) {
                transformPrefix = val;
                transformProperty = transform;
            }
        });

        isClassListSupportedState = 'classList' in documentElement;
        isMsPointerSupported = "msPointerEnabled" in (win.navigator || {});
    }

    /**
     * browser features detection
     * @class KISSY.Features
     * @private
     * @singleton
     */
    S.Features = {
        // http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx
        /**
         * whether support microsoft pointer event.
         * @type {Boolean}
         */
        isMsPointerSupported: function () {
            return isMsPointerSupported;
        },

        /**
         * whether support touch event.
         * @return {Boolean}
         */
        isTouchEventSupported: function () {
            return isTouchEventSupportedState;
        },

        /**
         * whether support device motion event
         * @returns {boolean}
         */
        isDeviceMotionSupported: function () {
            return !!win['DeviceMotionEvent'];
        },

        /**
         * whether support hashchange event
         * @returns {boolean}
         */
        'isHashChangeSupported': function () {
            // ie8 支持 hashchange
            // 但 ie8 以上切换浏览器模式到 ie7(兼容模式),
            // 会导致 'onhashchange' in window === true,但是不触发事件
            return ( 'onhashchange' in win) && (!ie || ie > 7);
        },

        /**
         * whether support css transition
         * @returns {boolean}
         */
        'isTransitionSupported': function () {
            return transitionPrefix !== undefined;
        },

        /**
         * whether support css transform
         * @returns {boolean}
         */
        'isTransformSupported': function () {
            return transformPrefix !== undefined;
        },

        /**
         * whether support class list api
         * @returns {boolean}
         */
        'isClassListSupported': function () {
            return isClassListSupportedState
        },

        /**
         * whether support querySelectorAll
         * @returns {boolean}
         */
        'isQuerySelectorSupported': function () {
            // force to use js selector engine
            return !S.config('dom/selector') &&
                isQuerySelectorSupportedState;
        },

        /**
         * whether is ie and ie version is less than specified version
         * @param {Number} v specified ie version to be compared
         * @returns {boolean}
         */
        'isIELessThan': function (v) {
            return !!(ie && ie < v);
        },

        /**
         * get css transition browser prefix if support css transition
         * @returns {String}
         */
        'getTransitionPrefix': function () {
            return transitionPrefix;
        },

        /**
         * get css transform browser prefix if support css transform
         * @returns {String}
         */
        'getTransformPrefix': function () {
            return transformPrefix;
        },

        /**
         * get css transition property if support css transition
         * @returns {String}
         */
        'getTransitionProperty': function () {
            return transitionProperty;
        },

        /**
         * get css transform property if support css transform
         * @returns {String}
         */
        'getTransformProperty': function () {
            return transformProperty;
        }
    };
})(KISSY);

(https://github.com/kissyteam/kissy/blob/master/src/seed/src/features.js)[https://github.com/kissyteam/kissy/blob/master/src/seed/src/features.js]

触屏设备事件支持

大家都知道,标准只需要实现touchstart touchend touchmove touchcancel几个事件
http://www.w3.org/TR/touch-events/
这几个事件远远不能满足我们触屏设备的开发,为此KISSY对触屏事件做了增强

包括以下事件:

  • doubleTap
  • singleTap
  • tap
  • tapHold
  • swipe
  • swiping
  • rotateStart
  • rotate
  • rotateEnd
  • pinchStart
  • pinch
  • pinchEnd
  • shake

为了兼容移动与pc, kissy event 还提供手势事件的枚举:

  • Event.Gesture.start pc 上为 'mousedown' , 触屏为 'touchstart'
  • Event.Gesture.move pc 上为 'mousemove' , 触屏为 'touchmove'
  • Event.Gesture.end pc 上为 'mouseup' , 触屏为 'touchend'
  • Event.Gesture.tap pc 上为 'click' , 触屏为 'tap'
  • Event.Gesture.doubleTap pc 上为 'dblclick' , 触屏为 'doubleTap'
    <script>
        KISSY.add(function(S){
            var Event = S.require('evnet'),
                Node = S.require('node');

            //如果你开发一个页面需要同时兼容pad和pad,不用进行事件的特性检测
            //在pad中是tap,在PC上是click
            Node.all(document.body).on(Event.Gesture.tap,function(ev){
                //you code
            })
        })
    </script>

全平台兼容,包括windows系列触屏设备。
KISSY event 文档链接:http://docs.kissyui.com/docs/html/api/core/event/

CSS3动画原生支持

KISSY.add(function(S){
    var Anim = S.require('anim'),
        Node = S.require('node');

    Node.all("#test").animate({
            transform: "translate3d(-"+pos+"px,0,0)"
        }, {
            duration: .3,
            //增加useTransition配置即可
            useTransition:true,
            //
            easing: "ease-out",
            complete: function(){
                //your code
            }
        });
},{
    requires:[]
})

这里要特别注意easing的配置,CSS3 transition-timing-function Property只支持以下几种:

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

参考文档:
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

重量级组件 scroll-view

这里说的重量级,并不是指这个组件很大,而是这个组件功能很强,而且移动设备上,基本上都会用到。
也没啥好介绍的,大家直接看demo吧

win8 支持

虽然windows系列设备目前市场份额不高,但是作为一个全平台支持的框架,KISSY这点做的还是不错的。

最后

需要强调的,以上我只列举了与移动开发相关的KISSY1.4的特性
除了这些,承玉对KISSY1.4进行了非常多的改进和增强,非常值得我们期待。
另外,剧透一下,不出意外KISS1.4将在下周正式发布,除了KISSY本身的改进,文档也做了非常大的调整,大家一起期待吧!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.