Angular

Decyzje Architektoniczne

Perspektywa... ma znaczenie :)
Image Image Image
Image
Image
Image

Binding

Image Image
Image

Angular (2+)


                        <!-- one-way binding, as AngularJS -->
                        {{ propertyFromClass }}
                    
                        <!-- 
                          listening to DOM event
                            $event is optional here
                        -->
                        <button (click)="methodFromClass($event)">
                    
                        <!-- DOM property binding -->
                        <a [href]="anotherProperty">{{ yetAnother }}</a>
                    
                        <!-- 
                          the only two-way binding
                            both ngModel property and ngModelChange event added 
                        -->
                        <input [(ngModel)]="andAnother" />

Decyzje Architektoniczne

  1. One-way binding
  3. Tłumaczenie kodu, statyczne typowanie

Binding - cd.

Image

Rozwiązanie? Zone.js!

Image
  • Odpalanie asynchronicznych operacji w "strefie"
  • Lepszy stack trace, możliwość śledzenia i mierzenia wywołań
  • Zastosowania? Debug, testowanie, profilowanie, odtwarzanie ścieżki użytkownika ("tu kliknąłem")

To tak można? Image

Image

Decyzje Architektoniczne

  1. One-way binding
  2. Zone.js (kontrola nad async)
  3. Tłumaczenie kodu, statyczne typowanie

Kod

Image
Image
Image Image
Image Image
Image Image
Image
Image Image
Image Image
Image

Decyzje Architektoniczne

  1. One-way binding
  2. Zone.js (kontrola nad async)
  3. Tłumaczenie kodu, statyczne typowanie

@angular/cli

Command Line Interface


                        npm i -g @angular/cli
                    
                        ng new PROJECT_NAME

Decyzje Architektoniczne

  1. One-way binding
  2. Zone.js (kontrola nad async)
  3. Tłumaczenie kodu, statyczne typowanie
  4. All-in-one

                import { BrowserModule } from '@angular/platform-browser';
                import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
                import { NgModule, Component, Input } from '@angular/core';

                @Component({
                  selector: 'angular-counter',
                  template: `
                    <div class="centered">
                      <button (click)="setCount(count - 1)">
                        -
                      </button>
                      <span>{{count}}</span>
                      <button (click)="setCount(count + 1)">
                        +
                      </button>
                    </div>
                  `
                })
                class Counter {
                  @Input() count: number;

                  setCount(count: number) {
                    this.count = count;
                  }
                }

                @Component({ selector: 'angular-app', template: '<angular-counter [count]="10">' }) class App { }

                @NgModule({
                  imports: [ BrowserModule ],
                  declarations: [ App, Counter ],
                  bootstrap: [ App ]
                })
                class AppModule { }

                platformBrowserDynamic().bootstrapModule(AppModule);

Decyzje Architektoniczne

  1. One-way binding
  2. Zone.js (kontrola nad async)
  3. Tłumaczenie kodu, statyczne typowanie
  4. All-in-one
  5. Modularność

                        package io.github.mat3e.demo

                        import io.reactivex.Observable
                        import org.springframework.stereotype.Component
                        import org.springframework.stereotype.Service
                        
                        @Service
                        class DemoService {
                            fun getData(): Observable<String> {
                                return Observable.just(
                                        "First",
                                        "Second"
                                )
                            }
                        }
                        
                        @Component
                        class DemoComponent(val service: DemoService) {
                            fun render() {
                                this.service.getData().subscribe { next -> println(next) }
                            }
                        }

Dzięki!

Image