随着互联网产业的爆炸式增长,与之伴生的网站设计web前端技术也在历经洗礼和蜕变。尤其是近几年随着移动终端的发展,越来越多的人开始投身或转行至新领域,这更为当今的it产业注入了新的活力。尽管web前端技术诞生至今时日并不长,但随着web技术的逐渐深入,今后将会在以下几方面发力。
1.web移动终端开发。
2.javascript的兄弟们。
3.百花齐放的类库和框架。
4.工程化的web前端开发规范。
web移动终端开发
phonegap:一个开源的开发框架,使用html、css和javascript来构建跨平台的移动应用程序。它使开发者能够利用iphone、android、palm、symbian、blackberry、windowsphone和bada等智能手机的核心功能,包括地理定位、加速器、联系人、声音和振动等。除了在本地编译应用之外,还可以使用phonegap提供的云端build工具进行应用编译。也就是说,只需要将用html5写好的应用上传到phonegap的云端服务器,phonegapbuild即可将其编译成适合不同平台的应用。
前端知识图谱
senchatouch:说到这里,就不得不提一些面向移动端的webui库,毕竟phonegap是一个工具,要想基于web技术构建完整的app,必须选择一些适用的移动ui库。而最值得一提的是senchatouch,它可以让webapp看起来像nativeapp。美丽的用户界面组件和丰富的数据管理,全部基于最新的html5和css3的web标准,全面兼容android和ios设备。phonegap昭示着一种开发趋势,即app也可以使用web前端技术来完成。而作为开发者最常用的ui工具箱,senchatouch又进一步加速了这种趋势,目前在淘宝已有大量的项目采用这种思路来搭建,即在内置应用的外壳加上自定义的基于移动web的ui库。相信在未来这种模式必会越来越流行。
sencha touch:说到这里,就不得不提一些面向移动端的webui库,毕竟phonegap是一个工具,要想基于web技术构建完整的app,必须选择一些适 用的移动ui库。而最值得一提的是sencha touch,它可以让web app看起来像native app。美丽的用户界面组件和丰富的数据管理,全部基于最新的html5和css3的web标准,全面兼容android和ios设备。phonegap 昭示着一种开发趋势,即app也可以使用web前端技术来完成。而作为开发者最常用的ui工具箱,sencha touch又进一步加速了这种趋势,目前在淘宝已有大量的项目采用这种思路来搭建,即在内置应用的外壳加上自定义的基于移动web的ui库。相信在未来这 种模式必会越来越流行。
media queries:在css2时代,如果你曾经为网站设计过打印版css,那么就会明白css3 media queries的作用。不过,css3的media queries比css2的media queries可以获取这些数据:浏览器窗口的宽和高、设备的宽和高、设备的手持方向(横向还是竖向)和分辨率等。也就是说,media queries提供了一种基于不同的平台写css的技术。这项技术在2011年初被推广开来,至今已非常火热,尤其是在web页面仍占互联网流量大多数的 今天,这种兼容技术能很快让网站兼容移动设备,保证产品实现最快的跨平台的兼容性和多平台的可用性。
zepto.js:一个专为 mobile webkit浏览器(如safari和chrome)而开发的javascript框架。它标榜自己简约的开发理念能够帮助开发人员简单、快速地完成开发 交付任务。更重要的是这个javascript框架是超轻量级的,只有5kb。zepto.js的语法借鉴且兼容jquery。目前已有不少网站开始基于 zepto.js做应用,因为在抛弃了ie浏览器的兼容性问题后,web开发会变得越来越纯粹,体积更轻巧,编码也更加愉悦。不可否认,随着移动终端开发 越来越流行,zepto.js在未来将会有更加广阔的应用场景和空间。
bootstrap: twitter推出的一个开源的用于前端开发的工具包。它由mark otto和jacob thornton合作开发,是一个css/html框架。bootstrap提供了优雅的html和css规范,由动态css语言less写成,与css 框架blueprint存在很多相似之处。bootstrap一经推出便颇受欢迎,一直是github上的热门开源项目,nasa和msnbc的 breaking news都使用了该项目。2012年第二季度,bootstrap发布了2.0版,bootstrap 2.0的一个重大改进是添加了响应设计特性,在1.0中,这是让很多开发人员抱怨的地方。而且为了提供更好的针对移动设备的响应式设计方 案,bootstrap 2.0采用了更为灵活的12栏网格布局。此外,它还更新了一些进度栏及可定制的图片缩略图,并增加了一些新样式。值得关注的是,bootstrap是一个 非常轻量级的框架,2.0在压缩后只有10kb。bootstrap为我们的网站快速搭建提供了不错的工具和思路,这个工具集将拥有更旺盛的生命力。
javascript的兄弟们
coffeescript是一个借鉴ruby编写的新编程语言,创建者jeremyashkenas戏称它是javascript的低调的小兄弟,因为coffeescript会将ruby编译成javascript,而且大部分结构都相似。但不同的是,coffeescript拥有更严格的语法。它的最大功绩就是将javascript硬绑的c/java语法抛弃了,改为采用类似ruby/python的语法。ruby/python本来就是深受lisp影响的,与javascript算是同门师兄,它们的语法经过了实践考验,非常适合函数式编程。这种优雅的语言独具魅力,即将面世的2013版的淘宝首页即采用了coffeescript实现。
typescript是微软开发的javascript的超集,typescript兼容javascript,可以载入javascript代码然后运行。与javascript相比,typescript进步的地方在于:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更像是传统的面向对象语言。由于javascript只是一个脚本语言,并非用于开发大型web应用,所以没有提供类和模块的概念。而typescript扩展了javascript实现了这些特性,能更好地支持大规模javascript应用开发,吸引了不开发者。但要注意,虽然typescript有微软做后盾看起来很有保证,但目前提供的只是早期的预览版本,typescript并不像它的网站看起来那样精美,最终版本可能会在一年后ecmascript6发布会确定,现在的版本只是个开发预览版。因此,typescript今后发展如何,还需要进一步观察。
此外,在服务器端,node.js越来越流行。如今node.js不仅作为处理高并发请求的中间层解决方案,还因其灵活的语法和丰富的底层api,越来越多的人开始用它来写工具,尤其是之前基于ant或者java的一些工具如今都有了node.js的版本。
如此看来,node.js在命令行工具领域有着更加广阔的应用场景,甚至可以代替perl或者ruby这些传统的动态语言。在淘宝node.js已有非常多的应用场景,例如在数据部门,node.js被用作处理高并发场景下的容池,专门吸收高并发的请求,甚至能够保持和客户端的长链接,而这在之前则需要花费很高昂的成本,例如comet技术等。此外,淘宝的开源前端类库kissy也可以直接运行于node.js环境,这样就可以在命令行运行kissy代码,很多前端代码就有机会采用自动化测试等,提高生产效率。再者,淘宝内部的开发工具链也已大部分采用node.js来构建了。
百花齐放的类库和框架
seajs是由支付宝前端高级技术专家王保平(玉伯)开发的一个遵循cmd规范的模块加载框架,可用来轻松愉悦地加载任意javascript模块和css模块。seajs非常小巧,小巧在于其压缩后体积只有4kb,而且接口和方法也非常少。seajs有两个核心:模块的定义和模块的加载。seajs可以加载任意javascript模块和css模块,能保证你在使用一个模块时,已将所依赖的其他模块载入脚本运行环境中。seajs可以让你享受写代码的乐趣,不用去管那些加载的问题。毕竟现在网页的可维护性和性能问题一样严峻,体现在:文件太多,不利于维护,前端后端都一样;http请求过多,当然这个可以通过合并解决,但如果没有后端直接合并,那么人工成本会非常大。用seajs就能非常好地解决这些问题。seajs遵循cmd规范,因此可以很方便地书写模块。目前已经有越来越多的人采用cmd规范来开发项目了。
最近微软已经正式发布了windows8操作系统,windows操作系统的风格已经完全变成了磁贴状的metroui。对于微软来说,这是一个巨大的改变,而且所有微软的平台包括桌面、平板、移动端及其网站都使用这个ui风格。
metrouicss是一个非常完整的创建metro风格的网站框架。它自成体系,但也可以与其他框架一起使用。使用less创建,并且拥有网格系统、排版样式、表格、按钮和图