Angular2案例rebirth开源
Angular2案例rebirth开源
在过去的几年时间里,Angular1.x显然是非常成功的。但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应。这些问题包括性能瓶颈、滞后于极速发展的Web标准、移动化多平台应用,学习难度等。
所以Angular团队最终决定以全新方式构建Angular2框架。Angular2框架现在已经进入RC6版本,很快它就将进入最终发布版。Angular2带来了很多不错的特性,它们包括跨平台、高性能、高效开发,拥抱web标准等等。
由于在Angular中引入了render层隔离设计,所以它也很容易实现跨平台的拓展。多平台拓展,理论上只需要实现目标平台的render层处理逻辑。目前在Angular2的生态圈中已有的跨平台框架如下:
Universal / Isomorphic: Universal(https://universal.angular.io/);
Progressive Web App: mobile-toolkit(https://mobile.angular.io/);
NativeScript: nativescript-angular(https://github.com/NativeScript/nativescript-angular);
React Native: react-native-renderer(https://github.com/angular/react-native-renderer);
Ionic2: Ionic2(http://ionic.io/2/);
Electron: angular-electron(https://github.com/angular/angular-electron/);
…....
Angular2架构的重新设计,使得其在性能方面也得到了巨大的改善:
组件树和单向的@Input、@Output使得变更的影响变得可预知,不再需要Angular1那样多次的digest直到稳定;以及结合
ChangeDetectionStrategy.OnPush
与immutablejs或者是Rxjs,Angular2的变更检查算法复杂度降为了log(n)。相对于Angular1,得到了至少5倍的性能提升;Universal服务端渲染能够更好提升首屏加载的性能,以及单页面应用的SEO问题;
AOT技术引入,能够让组件处理的生成代码提前到构建时期;再加上TypeScript的tree shaking等技术,能够更大化的减小加载JavaScript文件大小和提升运行时性能;
Web端Web Worker的实现,能够更好的解放我们的UI线程,得到更好的而用户体验,以及性能的提升;
不仅仅这些,Angular2还有很多的优秀特性。如:基于TypeScript的静态类型检查、拥抱web标准(Shadow dom,fetch API)等等。
总之,Angular2是一门值得我们学习的优秀前端框架。随着Angular2进入了RC6版本,意味正式发布版将不远矣。开始学习Angular2的时机已经到了。
同时笔者也开源了自己的rebirth项目供大家学习。它是一个利用Angular2开发的博客系统前端部分。它涉及到的Angular2知识点非常的全面,包括:组件化,自定义directive,路由,HTTP交互,Template drive form和Reactive form,异步路由,jwt token认证,资源权限控制,动态加载component,jQuery插件集成等常用知识点。
同时rebirth项目也集成了很多前端优秀的技术实践:
Angular2 + rxjs
bootstrap-sass
codemirror + markdownit(online markdown文档编辑器)
webpack2 + DashboardPlugin(代码打包)
TypeScript2 + @types
stubby(数据mock框架)
tslint + codelyzer(ts代码和Angular2组件静态检查)
angular2-template-loader(Angular2 component的html、css打包)
karma + phantomjs(TDD开发)
sass + postcss(css样式组织)
typedoc(ts文档)
fontgen-loader(icon font)
.......
在这里为大家放上几张rebirth效果图,供大家预览:
移动端样式:
PC端样式:
希望大家能喜欢。有任何的问题可以在笔者的github提issue,笔者会在空闲时间为大家解答。
rebirth 项目地址: https://github.com/greengerong/rebirth
Angular2案例rebirth开源的更多相关文章
- 最新Angular2案例rebirth开源
在过去的几年时间里,Angular1.x显然是非常成功的.但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应.这些问题包括性能瓶颈.滞后于极速发展的Web标准.移动化多平台应用, ...
- odoo:开源 ERP/CRM 入门与实践
看了这张图,或许你对odoo有了一些兴趣. 这次就是和大家一起交流开源ERP/CRM系统:odoo 对以下读者有帮助:研发.产品.项目.市场.服务.运营.管理等. 一.背景趋势 社交网络.电商O2O: ...
- 开源项目之ASP.NET Core + Vue.js 的前后端分离的通用后台管理系统框架
年前看了这个开源项目感觉很不错,这个小项目对于传统的.net 开发人员,想做技术提升是一个很不错的参考案例. 开源项目演示地址:https://dnczeus.codedefault.com/logi ...
- 开源风吹动开源心 ~ 8月16日,你若来,我们(Apache)在等你!
点击上方蓝字关注ALC Beijing 抢! 太好看了吧! 买它,就是它,买它! 要抢! ALC是Apache Local Community的缩写,是全世界范围的 Apache 开源爱好者本地群组. ...
- web前端知识总结
前言: 一直想着整理一下关于前端的知识体系和资料,工作忙了些,挤挤总会有的,资料很多,就看你能不能耐下心坚持去学了,要多学多敲多想,祝你进步~ 学习之前首先要大概了解什么是HTML ,CSS , JS ...
- Windows平台网站图片服务器架构的演进[转]
构建在Windows平台之上的网站,往往会被业内众多架构师认为很“保守”.很大部分原因,是由于微软技术体系的封闭和部分技术人员的短视造成 的.由于长期缺乏开源支持,所以只能“闭门造车”,这样很容易形成 ...
- Android TV开发总结(二)构建一个TV Metro界面(仿泰捷视频TV版)
前言:上篇是介绍构建TV app前要知道的一些事儿,开发Android TV和手机本质上没有太大的区别,屏大,焦点处理,按键处理,是有别于有手机和Pad的实质区别.今天来介绍TV中Metro UI风格 ...
- ASP.Net Core 运行错误 Http Error 502.5 解决办法
Http Error 502.5 - Process Failure 如果你看到上面这张图片了的话,说明你在本地运行的时候报错了. 尤其好多都是我的群友,说下情况. 这个一般是本地的.NET Core ...
- Spring FactoryBean应用
Spring 中有两种类型的Bean,一种是普通Bean,另一种是工厂Bean 即 FactoryBean.FactoryBean跟普通Bean不同,其返回的对象不是指定类的一个实例,而是该Facto ...
随机推荐
- DFS序 参考许昊然《数据结构漫谈》
网上特别讲DFS序的东西好像很少 太简单了? 实用性不大? 看了论文中 7个经典问题, 觉得挺有用的 原文 "所谓DFS序, 就是DFS整棵树依次访问到的结点组成的序列" &quo ...
- Esxi 5.0下配置LSI SAS RAID卡
公司有几台服务器,安装的是ESXI5.0的虚拟机,原来使用的是普通的台式机,现在新购的专用服务器并安装的LSI 8708 SAS RAID卡(服务器自带的板载RAID卡ESXI不支持),现在要将虚拟机 ...
- 使用Multipath进行多链路聚合并对聚合后的设备固定命名
使用Multipath进行多链路聚合并对聚合后的设备固定命名 1.启用Multipath: (1)启动multipathd服务 #service multipathd start 或者 #/etc/i ...
- Linux一键安装PHP/JAVA环境OneinStack
OneinStack 是一款PHP/JAVA环境一键配置工具. OneinStack包含以下组合 lnmp(Linux + Nginx+ MySQL ...
- iOS中UITableView的cell点击事件不触发didSelectRowAtIndexPath(汇总)
iOS中UITableView的cell点击事件不触发didSelectRowAtIndexPath 首先分析有几种原因,以及相应的解决方法 1.UITableViewCell的userInterac ...
- android编程中setLayoutParams方法设置
第一篇 private LinearLayout generateHeadOfControl() { LinearLayout LayoutHead = createLayout(LinearLayo ...
- [Javascript] Writing conventional commits with commitizen
Because semantic-release requires a specific message format, it's easier to follow this convention u ...
- intent和intentfilter
intent 和intent Filters startActivity()的机制 用到了IBinder ipc 用到了进程间通讯机制 activity有四种LaunchMode 当startActi ...
- spring mvc DispatcherServlet详解之前传---前端控制器架构
前端控制器是整个MVC框架中最为核心的一块,它主要用来拦截符合要求的外部请求,并把请求分发到不同的控制器去处理,根据控制器处理后的结果,生成相应的响应发送到客户端.前端控制器既可以使用Filter实现 ...
- Android开发艺术探索》读书笔记 (8) 第8章 理解Window和WindowManager
第8章 理解Window和WindowManager 8.1 Window和WindowManager (1)Window是抽象类,具体实现是PhoneWindow,通过WindowManager就可 ...