最新Angular2案例rebirth开源

在过去的几年时间里,Angular1.x显然是非常成功的。但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应。这些问题包括性能瓶颈、滞后于极速发展的Web标准、移动化多平台应用,学习难度等。

所以Angular团队最终决定以全新方式构建Angular2框架。Angular2框架现在已经进入RC6版本,很快它就将进入最终发布版。Angular2带来了很多不错的特性,它们包括跨平台、高性能、高效开发,拥抱web标准等等。

由于在Angular中引入了render层隔离设计,所以它也很容易实现跨平台的拓展。多平台拓展,理论上只需要实现目标平台的render层处理逻辑。目前在Angular2的生态圈中已有的跨平台框架如下:

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

时间: 2024-08-08 01:27:13

最新Angular2案例rebirth开源的相关文章

[最新].NET Core ORM 开源项目一览,持续更新

原文:[最新].NET Core ORM 开源项目一览,持续更新 截至2019-05-08共收集27个 .NET Core ORM 开源项目,38个 .NET ORM 开源项目. .NET Core ORM 开源项目收集地址:https://github.com/orm-core-group .NET ORM 开源项目收集地址:https://github.com/orm-group 如有遗漏,欢迎引荐!!! 项目名称 项目描述 代码仓库地址 Insight.Database Fast, lig

这可能是目前最新的 Vue 相关开源项目库汇总(转)

访问地址:https://juejin.im/entry/58bf745fa22b9d0058895a58 原文链接:https://github.com/opendigg/awesome-github-vue awesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. 如果收录的项目有错误,可以通过issue反馈给我们.这里的项目Star数不是实时更新的,一般是一周更新一次. UI组件

【开源专访】Fourinone创始人彭渊:打造多合一的分布式并行计算框架

摘要:Fourinone是一个分布式并行计算框架,以轻量的方式提供了一个四合一的分布式框架功能以及简单易用的API,通过实现对多台计算机资源的统一利用,来获得强大的计算能力.本期我们采访了项目创始人彭渊. Fourinone(即Four-in-one,中文名字“四不像”)是一个分布式计算框架,提供了一个4合1的分布式框架功能(即整合了Hadoop.Zookeeper.MQ.分布式缓存的主要功能)和简单易用的编程API,实现对多台计算机CPU.内存.硬盘的统一利用,从而获取到强大计算能力去解决复杂

2015年微软“十大”开源之举

引言:有人将2015年称为"开源之年",而其中微软的开源举措也被大家津津乐道.开源,这不是一夜之间发生的.下面这张图所显示的仅仅是微软这10多年来参与并贡献开源软件的一小部分动作,而在这期间,微软一直和开源社区共同努力让更多的开源软件可以在微软的平台上运行.比如,微软投入到PHP已经多年,目的就是为了让PHP在Windows平台上成为第一梯队的产品,从而提供包括高性能超大规模的Azure Web 应用. 世界变化很快,微软的开源之路也越走越宽.在这里,我们就来历数一下,2015年微软在

开源项目之ASP.NET Core + Vue.js 的前后端分离的通用后台管理系统框架

年前看了这个开源项目感觉很不错,这个小项目对于传统的.net 开发人员,想做技术提升是一个很不错的参考案例. 开源项目演示地址:https://dnczeus.codedefault.com/login 用户名:administrator密码:111111 项目源码下载地址:https://github.com/lampo1024/DncZeus 参考学习地址:https://www.cnblogs.com/bobositlife/p/10147431.html 当今.net 也在向开源时代迈进

腾讯万亿级分布式消息中间件TubeMQ正式开源

TubeMQ是腾讯在2013年自研的分布式消息中间件系统,专注服务大数据场景下海量数据的高性能存储和传输,经过近7年上万亿的海量数据沉淀,目前日均接入量超过25万亿条.较之于众多明星的开源MQ组件,TubeMQ在海量实践(稳定性+性能)和低成本方面有着比较好的核心优势. TubeMQ 捐赠 Apache 基金会 9月12日,Apache软件基金会成立20周年之际,腾讯在ApacheCon宣布TubeMQ 开源.TubeMQ 启动计划捐赠 Apache 基金会的流程. TubeMQ系统特点 1.

要买的书和软件

Windows内核设计思想 采用完整的 ReactOS 代码(经过部分修改)Windows内核安全与驱动开发x86/64 体系探索及编程处理器虚拟化技术Windows Internals(中文版为<深入解析 Windows 操作系统)潘爱民老师所著<Windows内核原理与实现毛德操老师所著的<Windows 内核情景分析——采用开源代码 ReactOS>LINUX核心源代码情景分析Windows环境下32位汇编语言程序设计(典藏版) x86/x64体系探索及编程(对x86处理器介

大数据高并发系统架构实战方案

大数据高并发系统架构实战方案(LVS负载均衡.Nginx.共享存储.海量数据.队列缓存 ) 随着互联网的发展,高并发.大数据量的网站要求越来越高.而这些高要求都是基础的技术和细节组合而成的.本课程就从实际案例出发给大家原景重现高并发架构常用技术点及详细演练.通过该课程的学习,普通的技术人员就可以快速搭建起千万级的高并发大数据网站平台,课程涉及内容包括:LVS实现负载均衡.Nginx高级配置实战.共享存储实现动态内容静态化加速实战.缓存平台安装配置使用.mysql主从复制安装配置实战等.课程二十.

Android TV开发总结(二)构建一个TV Metro界面(仿泰捷视频TV版)

前言:上篇是介绍构建TV app前要知道的一些事儿,开发Android TV和手机本质上没有太大的区别,屏大,焦点处理,按键处理,是有别于有手机和Pad的实质区别.今天来介绍TV中Metro UI风格,并结合实例说明. Android TV发展离不开Metro UI,先看最新的泰捷TV的会员区效果,属于典型的Metro风格,如下: 什么是Metro UI: Metro的设计意念来源于交通局巴士站站牌机场和地铁的指示牌给了微软设计团队灵感,设计团队说Metro是来源于美国华盛顿州金县都会交通局(K