Angular Platform
www.briebug.com
CEO, BrieBug
Developer for 20 years
Focused on JavaScript based solutions
About Me
We will cover
- History
- Improvements
- CLI
- Angular 4
- Enterprise Patterns
www.briebug.com
AngularJS
www.briebug.com
2009
1.6.4
Beginning
- Large Controllers/Views
- $scope
- digest
- two way data binding
www.briebug.com
Components
- v1.3
- John Papa
- Breaking down large controllers/views
- controllerAs
- viewModel
- reducing scope
www.briebug.com
Component
- Performance issues
- endless digest loops
- $emit/$on
www.briebug.com
Complexity
Angular 2.0
- 2.0.0-alpha.27 6/17/15
- 7 RC's
- 2.0.0 - Released ~9/14/2016
www.briebug.com
AngularJS
www.briebug.com
vs. Angular
"It's Just Angular"
www.briebug.com
What's new in 2.0?
TypeScript
Architecture
CLI
www.briebug.com
TypeScript
- Class and Module Support
- Static Type-checking
- ES6 Feature Support
- Superset of JavaScript
www.briebug.com
Architecture
- Component Design
- Improved modules
- @angular/core, @angular/forms, etc.
- Observables
www.briebug.com
CLI
- "Instant" project
- Generate Scaffolding
- Linting/Best Practices
- Testing pre-configured
- Build/Package
www.briebug.com
CLI - create project
www.briebug.com
ng new my-new-project --routingCLI - generate
www.briebug.com
ng generate component customerCLI - generate
www.briebug.com
CLI - linting
www.briebug.com
ng lintTesting
- TestBed Library
- Unit Tests
- Integration Tests
- End to End tests
www.briebug.com
Testing
www.briebug.com
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CustomerComponent } from './customer.component';
describe('CustomerComponent', () => {
let component: CustomerComponent;
let fixture: ComponentFixture<CustomerComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CustomerComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CustomerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
CLI - Build
- SystemJS => WebPack
- ng serve
- proxies
- dist/packaging
www.briebug.com
You have now achieved coding Nirvana
4
Angular 4?
March 23, 2017
www.briebug.com
Improvements!
Angular as a Platform
www.briebug.com
What's new?
www.briebug.com
- AOT improvements to reduce generated code, up to 60% smaller in most cases
- Separate package for animations
- Improved *ngIf and *ngFor
- Community-built Angular Universal adopted by the Angular team: @angular/platform-server
- TypeScript 2.2 compatibility
- Template source maps
*ngIf
www.briebug.com
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
<div *ngIf="isValid;then content else other_content">here is ignored</div>
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>*ngFor
www.briebug.com
<div *ngIf="userList | async as users; else loading">
<user-profile *ngFor="let user of users; count as count; index as i"
[user]="user">
User {{i}} of {{count}}
</user-profile>
</div>
<ng-template #loading>Loading...</ng-template>Performance
- Smaller Apps
- Faster bootstrap
- Faster Builds
- Tree Shaking
- Animations
- Lazy Loading
www.briebug.com
Tools
- Language services
- Angular Universal
- Progressive Web Apps
- CLI - continues to improve
www.briebug.com
Language Sevices
www.briebug.com
Angular Universal
- Performance
- SEO
- Browser Support
- Link Previews
www.briebug.com
Progressive Web Apps
www.briebug.com
CLI
www.briebug.com
- Best Practices
- Routing
- ng eject
- Tree Shaking
Stability
- Semantic Versioning
- No Breaking Changes
- Long Term Support through Oct 2018
www.briebug.com
Ecosystem
- D3
- Dragula
- Redux
- New tools every day
www.briebug.com
Ecosystem - CI
- GitHub
- Circle-CI
- CodeCov.io
- Heroku
www.briebug.com
Angular
www.briebug.com
is not always
the best choice
Web Components
www.briebug.com
- React
- VueJS
- Polymer
- AngularJS
www.briebug.com
Where do we go?
www.briebug.com
Version 5
- AOT default and super fast
- Tree shaking
- Smooth Upgrades
Who is using Angular?
- 26 Fortune 1000 companies HQ in CO
- 50% already using Angular
- Job postings by 2 other companies
- Lots more Fortune 1000 here locally
www.briebug.com
Industries using Angular
- Media & Entertainment
- Financial
- Healthcare
- Oil & Gas
- Food & Beverage
- Manufactoring
www.briebug.com
How Do I get Help?
- www.angular.io
- RM Angular Meetup
- PluralSite
- CodeSchool
- BrieBug
www.briebug.com
RM Angular
www.briebug.com
June 28th 6:30PM
Redux Forms
Questions?
www.briebug.com