群组信息 私有

administrators

@angular/cli 8.0 支持SVG文件直接作为组件模板来使用

近期,@angular/cli 8.0 已经升级到了beta 5版本,在最新的版本里面增加了一个很有用的小特性:支持把SVG文件直接作为组件的模板来使用,就像这样:

0_1552303182015_1.png

有了以上特性之后,我们就可以在SVG标签里面使用Angular模板语法支持的所有特性,例如:指令、事件绑定等等。这样就大大扩展了SVG标签本身的表现力:

0_1552303313843_2.png

https://codesandbox.io/embed/vjq0w5jo2l

这个小特性也可以在 @angular/cli 之外使用,它是一个独立的webpack小插件@ngtools/webpack

当然,你也可以在.html模板内部使用SVG标签,同样能支持 Angular 模板引擎的所有特性:

0_1552303602100_3.png


本文由 @业余小编 意译改写,Medium 上的原文链接在这里:

https://medium.com/@oocx/using-svg-files-as-component-templates-with-angular-cli-ea58fe79b6c1

有关Angular的最新资源和咨询请参考这里:

http://www.ngfans.net

发布在 posts
【30-55K】vivo南京研发中心招聘高级前端工程师

公司介绍

vivo 南京研发中心。

岗位要求

  • 本科及以上学历,三年及以上互联网行业web前端开发经验
  • 掌握HTML(5)、CSS(3)、JavaScript(ES6),熟悉主流浏览器特性以及兼容方案,能够精准还原设计稿;
  • 熟悉Vue、React、Angular等主流框架中的至少一种,熟知其核心实现原理及适用场景;
  • 熟悉Chrome Devtool、Charles/Fiddler等前端常用的调试和代理工具,掌握常规性能优化手段;
  • 掌握网页安全原理,能够处理如XSS、CSRF等常见前端安全问题;
  • 熟悉Gulp、Webpack等前端代码构建工具的使用,有较强的工程化能力;

薪资

月薪【30-55K】,面谈。

工作地点

南京

联系方式

准备好你的简历,邮件发送至 chenganghlw@vivo.com

发布在 jobs
ng-India2019 在【哈里亚纳邦-古尔冈市】举行

0_1551001506939_3.jpg

ng-India2019 在【印度-哈里亚纳邦-古尔冈市】举行,古尔冈市位于印度首都新德里市隔壁。

0_1551001498171_7.jpg

ng-India 是印度每年一度的 Angular 专题盛会,今年是第二届。

0_1551001522043_1.jpg

Angular 是最受印度开发者欢迎的前端框架,之一。

0_1551001530897_6.jpg

0_1551001737307_8.jpg

活动详情参见 ng-Indeia2019 官方网站:https://www.ng-ind.com/#head ,主题列表、Speaker列表、相关资源都有链接。

完整的视频和Slide正在逐步上传中,本站将会跟踪收集。


本文由【@业余小编】收集整理,更多关于Angular的实时资讯和学习资源欢迎关注:http://www.ngfans.net

发布在 posts
RE: 浩鲸云计算招聘高级前端工程师

已确认信息真实,有兴趣的试试,提【大漠穷秋】的名字有加分。(确实不认识的也别瞎说,老同事问起来我也尴尬对吧?)

发布在 jobs
浩鲸云计算招聘高级前端工程师

公司介绍

浩鲸云计算科技股份有限公司(简称“浩鲸科技”)是阿里巴巴和中兴通讯共同投资的一家全球领先的数据智能科技公司。http://www.iwhalecloud.com/

岗位要求

  • 市面上主流的前端框架【至少精通一种】
  • 由于业务上需要展现非常多的强图形内容,所以需要你对H5/SVG/Canvas(包括webgl)相关的技术非常熟悉

薪资

月薪【20K】起,看你自己水平现场谈。

工作地点

南京

联系方式

准备好你的简历,微信扫码发送给:

0_1550742473084_1.png

发布在 jobs
RE: Angular 8.0 和 Ivy 演进计划

Ivy 是一个极其重量级的更新,它可以极大地压缩打包体积、提升运行时速度,如果这个特性做得好,将会 Make Angular Great Again。否则,你懂的。

发布在 posts
Angular 8.0 和 Ivy 演进计划

0_1550229506612_angular-ivy.png

“Ivy 到底什么时候能好?”

几乎每个星期都有人来问我们这个问题。

所以,我专门解释一下,以下是关于 Angular 8.0 和 Ivy 的演进计划。

根据版本计划,我们将会在2019年Q2发布Angular 8.0版本,届时将会包含 Ivy 预览版,在这个版本里面可以选择打开Ivy。

8.0 版本将会包含哪些特性?

目前团队中的大部分人都在为Ivy的发布而紧张工作,尽管如此,我们还是会在8.0版本里面引入很多更新。请特别注意:在最终发布之前,本文所描述的内容随时会发生改变。

针对现代JavaScript的差异化加载模式

新版本的CLI将会在打包的过程中同时生成两种JavaScript包:遗留版本(ES5)和(ES2015+),然后根据客户端的浏览器版本选择加载哪一种包。对于现代浏览器,将会极大地提升加载速度和TTI(time to interactive)。这块工作是基于Manfred Steyer和他的开源项目ngx-build-modern 开发的。

  • 可选的Ivy预览版本
    预览版将会评估你的项目是如何使用Ivy引擎的,同时用来给我们提供一些反馈,帮助我们做一些必要的改进。

  • Angular 路由模块向下兼容
    我们将会给 Angular 路由模块增加一个向下兼容模式,从而简化一些大型项目的升级过程。对于那些还在使用 AngularJS 的 $route API 的团队,这个特性将会让升级到新版本的过程更加平滑。
    (小编:完全没有必要,用 AngularJS 的团队基本上都伤透了心,都迁移到Vue去了,官方还是省点人力出来把新版本打磨得更好些为上。)

  • 改进Web Worker打包方式
    Web Worker 是一个非常流弊的特性,可以在主线程之外运行一些代码,从而提升应用的运行速度和并行性。根据开发者的强烈要求,我们将会在CLI里面内置针对 Web Worker 的打包支持。

  • 分享使用数据,可选
    为了让我们的工作更好地匹配社区的需求,我们将会在CLI里面增加监控模块。获得您的许可之后,我们将会收集一些匿名数据,比如:指令的使用情况、打包速度。收集到的数据越多,就可以帮助我们把Angular打造得越好。

  • 依赖升级
    按照惯例,为了和周边生态保持同步,我们会升级一大堆依赖包,例如:TypeScript、RxJS,以及Node版本。

使用Ivy之后的输出将会是什么样子?

在8.0中,我们计划发布一个Ivy渲染引擎的预览版本。如果你还不知道Ivy是什么,请参考这份视频(墙):


youtu.be

在预览版中,你可以切换渲染引擎,在构建的时候可以选择Ivy或者View Engine。详细做法会在后续的beta版本中放出。如果选择使用Ivy引擎,输出的运行时指令将会变成Ivy指令,而不是ViewEngine指令。届时将会使用Ivy编译器来构建你的应用,你所依赖的Angular模块,以及其它第三方模块都不会受到影响,因为我们将会使用compatibility compiler(兼容编译器)来进行检查。预览版会帮助你定位各种依赖问题,同时也会帮助我们改进兼容性问题。

在可选的预览版里面,你可以期待以下特性:

  • 生成更加便于阅读和调试的y运行时代码。
  • 重新编译的时间更短。
  • 优化打包体积(实际的业务应用将会看到大幅度的体积优化,我们同时还规划了更多改进)。
  • 优化组件模板中的类型检查。
  • 更好的向下兼容性。

Ivy 目前还不能全场景支持。在预览版里面,某些特性还无法完全兼容,比如i18n和Angular Universal。另外,在预览版里面,语言服务还无法工作。

预览版的主要目标是:让开发者把应用迁移到Ivy编译器和运行时指令上来,而不需要重写应用。在未来的稳定版中,很多Ivy引擎特有的API将会加入到公开API列表中,它们将会作为Angular Labs的一部分发布。

什么时候一切就绪?

我们无法保证精确的发布日期,并且本计划所描述的内容可能随时会发生修改。目前的计划是:2019年4月进入RC,然后大概过一个月发布8.0.0版本,届时这些特性将会达到基本可用的状态。我们将会利用Ivy的预览版来验证向下兼容性,同时验证那些可能会用到的自动迁移工具。

我们计划在今年秋天发布的下一个主版本里面打开Ivy完整版,到时候每个人都能使用它。在9.0版本里面,我们将会默认启用Ivy,并且不再提供自定义选项,因为我们将会把关注点放在向下兼容性和支持现有项目上面。

对于9.0版本即将发布的完整Ivy特性我们感到非常兴奋,它将会为很多开发者打开新世界的大门,也包括我们团队自身。 一旦获取到Ivy的最新进展,我们将会把最新的开发计划、用户体验、新特性,以及API分享给开发者。

如果想获取更多资讯,请随时关注本博客、twitter,或者来 ng-conf 面谈。


本文由“业余小编”意译改写,转载请获取授权,原文链接:
https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7?tdsourcetag=s_pcqq_aiomsg​blog.angular.io​
blog.angular.io

发布在 posts
介绍基于Angular设计思想的微服务框架Notadd

前言

随着 node.js 社区的不断发展,虽然有 express 、koa 、egg … 这样的框架,或者更应该称之为工具包,无一解决 js 作为一个后端语言的问题 —— 架构。

Nest.js 的出现解决了这些问题,它使用了 Typescript ,较为完整的 AOP 思想,同时在 IO 密集型应用上有着不俗的表现,是真正意义上的后端框架,我们团队主要成员从 PHP(Laravel) 、 Java (spring) 切换到了 Nest.js 。要说它有什么好的话,是在 开发成本(低于 go、Java),维护成本(低于go,跟 java 看齐),硬件成本(略高于 go) 三者之间的一个新的权衡。

Notadd 的出现,是在用 Nest.js 解决后端问题的基础上,用最合理的成本来解决高可用、横向拓展等问题 —— 微服务。

Nest 的全栈开发

Nest 可以说跟 Angular 是绝配了,亮点在于 Nest 在很多方面吸取了 Angular 的特性,并且许多装饰器名字也一致,开发人员可以轻松在 Nest 和 Angular 之间切换,当然,你还需要了解 CSS 和 typeorm 。这大大降低了沟通成本和开发成本,使得人员配置变得更加灵活。

Notadd 也提供了相应 Angular 的前端框架 —— ng-notadd 。

微服务的一点说明

notadd-arch-cn

网关层: 主要处理限流,以及无关业务的权限。 【用户只能请求网关】
API 层: 通过 Grpc 请求服务层拿到数据,提供前端所需的 API ,但不能操作数据库。
服务层: 通过 Typeorm 连接数据库,CURD 以及处理事务、队列,同时提供 Grpc 的服务端,以供 API 层请求。

Notadd 微服务总共可以分为两方面来看,一方面是业务,业务无需关注环境层面问题,根据 IP 和端口建立 Grpc 的连接即可。一方面是环境,环境可以是单机 利用pm2 或者 pandora 等工具进行单机部署,也可以通过docker-compose 进行单机或者多机部署,更可以通过 k8s 进行集群部署。

也就是说业务并不需要关注环境的具体实现,而环境也不需要知道业务的具体实现。你可以按照传统方式部署,也可以按 k8s 集群或者你喜欢的方式部署。
你可以在开发环境像往常一样开发,而在线上将开发的成品进行单机或者集群部署。

Notadd 的微服务

Notadd 后续会提供相应的 cli 工具:

对于业务:

  • 提供相应的开发标准,减少团队沟通成本
  • 提供开箱即用的服务应用
  • 提供一键生成代码

对于环境:

  • 提供快速部署
  • 提供持续集成 (开发中)
  • 提供环境监测和管理(开发中)

特性

【微服务】 支持单机部署和微服务化
【高性能】 异步高性能应用,单机并发轻松上万
【易维护】 使用 Typescript 开发,智能化的代码提示和编译时的代码检查机制
【可插拔】 模块化开发系统,依据业务需求,选择合适的模块,进行 API 层的搭建

相关技术

  • Typescript 【开发语言】
  • Nest.js 【基础框架】
  • GraphQL 【API 接口】
  • TypeORM 【数据库 ORM】
  • Grpc 【微服务通信】
  • Rxjs 【JS 的 ReactiveX 库】

项目地址

https://github.com/notadd/notadd (欢迎star)

相关服务地址: https://github.com/notadd (用户组织权限系统、CMS、短信、Redis 缓存、微信公众平台、微信支付… )

发布在 posts
NiceFish 近期的更新汇总

0_1547788988472_nice-fish.png

Changelog

最近花了一些时间对NiceFish系列的项目做了大幅度的更新:

  • 调整了learn-*系列demo项目的目录结构,全部归总到LearnAngular这个组织下面,方便查找 https://gitee.com/learn-angular-series ,同时对gitchat上的教程文本做了对应的修改。
  • NiceFish把Angular升级到了当前最新的7.2版本,PrimeNG也升级到了7.2(看起来还有一些CSS方面的小bug)。
  • NiceFish的外观做了大幅度修改,https://gitee.com/mumu-osc/NiceFish。
  • OpenWMS的外观也做了大幅度修改,https://gitee.com/mumu-osc/OpenWMS-Frontend。
  • 新增了一个服务端项目nicefish-spring-cloud( https://gitee.com/mumu-osc/nicefish-spring-cloud ),用来和NiceFish进行对接,已经完成了一些基本的功能,如:
    • 用Consul进行服务注册和发现
    • 用Zuul对外暴露统一的REST服务入口
    • 用SpringSecurity+OAuth2+JWT实现SSO
    • 用Druid监控MySQL
    • 文章管理(列表分页查询、新增文章)
    • 评论管理(列表分页查询)
    • 用户管理(注册、登录、SSO)
      如果你刚好需要类似的技术体系,请参考这个项目。
  • NiceFish新增了一个分支for-spring-cloud,用来跟以上后端对接。

结构和截图

以下是2个项目的基本结构和一些效果截图:

0_1547789061807_bundle-report.png

0_1547789077519_structure.png

0_1547789093428_maven-module-dependency.png

0_1547789555707_5.png

0_1547789112412_6.png

0_1547789119517_1.png

0_1547789527955_3.png

0_1547789534145_4.png

0_1547789563027_7.png

发布在 posts

与 Angular开发者 的连接断开,我们正在尝试重连,请耐心等待