State of angular ecosystem
Download as PPTX, PDF2 likes83 views
The document provides an overview of the Angular ecosystem as of September 2018, highlighting essential tools, libraries, and resources for both front-end and back-end developers. It emphasizes the importance of TypeScript, Angular CLI, and various UI libraries for building applications, while also suggesting continuous integration practices. Additionally, it mentions community resources and learning materials, showcasing the vibrant Angular community and its growth over the years.
State of angular ecosystem
- 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.