This is an overview of tools, libraries, and initiatives around Angular and Frontend development. Each topic deserves a talk by its own, so don't be shy. Even the presenter doesn't know all this stuff, but if you as a team or individual wants to take a quick look at what is the possibilities of the framework and its community and is evaluating if it will attend your project needs, check this slide. It also shows some tools that are not directly related to angular, but influences on the architecture. This talk was presented on the Brazil meetup group AngularBH and the majority of content is English.

1. State of Angular
Ecosystem
As of September 2018

2. NGULAR BH
Precisamos de um logo uai.
A ideia está lançada. Algum design bom ai? Conversa lá:
https://www.meetup.com/AngularBH/

3. About Myself
• Front-end – Angular Dev
• Back-end – Java EE and
Spring Developer
• DevOps – Kubernetes,
Ansible, SaltStack, Linux
• Working for Brazilian
government

4. What you need to learn
1
Typescript
2
http://reactivex.io/ and its JS
implementation
https://github.com/ReactiveX/rxjs

5. What is build in?
Libraries
• Router
• Forms
• I18N
• Animation
Core
• Components
• Modules
• Data binding
• Dependency
Injection
• Zones
Tools
• AOT
• Language Service
• Test
• CLI

6. Get Starting - Tools
• All you need is Node and NPM – Use as non admin user and
save some headache
• Angular CLI is standard
• Visual Studio Code and Webstorm/Intellij (Jetbrains) – Look
no further

7. Mid Level Tools
Angular CLI – Tests, karma, jasmine,
protactor is already build in.
Ts-lint
https://github.com/mgechev/codelyzer#how-
to-use Expand on what Ts-lint can do
Language Service
https://github.com/compodoc/compodoc -
Documentation with Angular semantic aware
Snippets – Automate boilerplate. Vscode and
Jetbrains
https://github.com/rangle/augury - Debugging
in browser.

8. Advanced – Tools
https://nrwl.io/nx - Best practices and
process enforced. Promising
Schematics – Extend Angular CLI
https://www.npmjs.com/ - Share your public
library
https://www.sonatype.com/nexus-repository-
sonatype - Share your private library. NPM,
Maven/Java, NuGet, Docker registry,
RubyGems, Linux APT, Yum and more.
https://github.com/NathanWalker/angular-
seed-advanced - All platforms, same code

9. UI Libraries – All levels
… and many others
http://truly-ui.tk/ - Focus
on desktop feel. Brasil é
nois, hue, hue, hue.
https://vaadin.com/co
mponents - Polymer
based, few but pixel
perfect
https://www.primefaces.
org/primeng/ - In my
opinion the best to work
with
https://github.com/vladotesanovic/
ngSemantic - Based on semantic UI
https://material.angular.io – Good
quality. Material design focus
https://teradata.github.io/covalen
t - Good quality. Material design,
few components

10. Mobile - Hybrid
https://ionicframework.com/
- Most famous, with reason
https://onsen.io/v2 – You may tough
there is only ionic?

11. Mobile – Native
• Yes, native baby.
• https://www.nativescript.org/
- Very good, more stable than
reactive native
• Technically is Cross Platform,
but who cares?
• I could not find others (this
takes a big investment to build)

12. Cross Platform
• https://github.com/angular/angular-electron
• https://ionicframework.com/docs/
• https://github.com/NativeScript/nativescript-
angular
• http://angular.github.io/react-native-renderer/
This is a surprise for me. Looks like an
experiment
• https://github.com/NathanWalker/angular-
seed-advanced - Nativescript, Electron, Web, on
its finest art.

13. Cross Platform – Advance Angular Seed

14. Cross Platform – Advance Angular Seed

15. Continuous Integration and
Deployment
• Pick a CI tool
• If opensource on github use travis
• I recommend Gitlab
• https://www.netlify.com/ - Build and deploy static sites, CDN build in
• Use CDN if building for international
• Chrome headless is promising
• Adopt docker, or go to a slow death.
• Xvfb and display export
• Example: https://travis-ci.org/giovannicandido/angular-
spa/builds/370073239

16. Architecture and Design
• Redux on Angular - https://github.com/rintoj/statex
• Reactive Extensions - https://github.com/ngrx
• Interceptors
• Offline – IndexDB + Service Workers
• Oauth Token
• https://graphql.org/ - Promising. Check
https://www.odata.org/ as well
• Using spring? QueryDSL ( https://docs.spring.io/spring-
data/jpa/docs/current/reference/html/#core.extensions.
querydsl )

17. Security
• https://www.keycloak.org/ - For all
organization. Don’t do security by yourself. And
I know you are smart
• Json Web Tokens
• https://www.owasp.org
• Oauth
• Gitlab Dependency Scanning ang GitHub
Security Alerts
• https://github.com/giovannicandido/angular-
spa I appreciate help pushing this.

18. Online course material
• Basically everywhere.
• Free: https://hackr.io/tutorials/learn-
angular
• Affordable: https://www.udemy.com/
• High quality and expensive:
https://www.pluralsight.com

19. Finishing
https://angular.io/resources
This overview is incomplete, but shows the power of the community.
Angular community and resources are the biggest of any frontend
framework I had met in the past 7 years, and keeps growing.

20. Join Us!
https://www.meetup.com/pt-BR/AngularBH/
https://bit.ly/2wQNTvz
https://publicslack.com/slacks/angularbh/invites/new
https://bit.ly/2wSDijN