Co wyciągnąłem

pisząc własną biblioteczkę angularową

Kontekst ma znaczenie

• /mateusz-chrzonstowski
• /_mat3e_
• /mat3e
  • mat3e.github.io/talks/
    ll-angular/MeetIT22.html
•  
• 🎓 Kurs Udemy
• 🖥️ 💰 (2013)
• 👔 ⇒ 🏪
• 👪

Spis treści

1. Skąd pomysł na własną bibliotekę?
2. DORF - Domain Object Reactive Forms
3. Lekcje - Angular, TypeScript
4. Lekcje - npm, webpack, inne narzędzia
5. Próby promocji, rezultaty

Więcej kontekstu

Spis treści

1. Skąd pomysł na własną bibliotekę?
2. DORF - Domain Object Reactive Forms
3. Lekcje - Angular, TypeScript
4. Lekcje - npm, webpack, inne narzędzia
5. Próby promocji, rezultaty

Pomysły, motywacja

• Uproszczenie tutoriala Dynamic Forms
• Brak bezpośredniego połączenia z frameworkami CSS
• Wysoki poziom abstrakcji
• Motywacja
  1. Zewnętrzna: "Wyłożyć" dynamiczne formularze koledze, bez doświadczenia w IT (zaangażowany w projekt)
  2. Wewnętrzna: Mieć projekt open-source

Szok!

• Zwyczajny dzień w pracy a kreatywność
  • Wymyśleć nazwę
  • Wymyśleć slogan
  • Opis, przykłady
  • Brak spotkań :)
• Dokumentacja?
  • API
  • Licencja
  • Changelog

Nazwa (1/2)

• Reactive/model-driven/dynamic forms
• DDD (Domain-Driven Design) - podejście do wytwarzania oprogramowania, skoncentrowane na Domenach
• 

Nazwa (2/2)

• DORF (po niemiecku: wioska)
• 
• Test
• 

Open Source a Agile

• The latter development methods were explicitly designed for teams working in a single office, communicating face-to-face
• Open source developers have turned quality control into a science
• Another tenet of open source development (...) is full documentation
  • Agile? "working software over documentation"
• English has become the lingua franca practiced by all programmers
• Most open source projects involve end users in relatively old-fashioned ways, such as through alpha and beta releases

Rozwijanie libki? SOLID!

• SRP = "do one thing and do it well"
• OCP (Open/Closed Principle) = otwarcie na rozwój (konfigurację), zamknięcie na modyfikację

  
                                  class StarRatingDefinition extends DorfFieldDefinition<number> { /*...*/ }
                                  class StarRatingMetadata extends DorfFieldMetadata<number, StarRatingDefinition> { /*...*/ }
                                  class StarRatingComponent extends AbstractDorfFieldComponent<number, StarRatingMetadata> { /*...*/ }
                              

• LSP (Liskov Substitution) = łatwość przełączania pomiędzy klasą a podklasami
  • DORF - łatwość przełączania pomiędzy frameworkami CSS
• ISP (Interface Segregation)
  • Pole formularza DORF = definicja, metadane, komponent...
• DIP (Dependency Inversion) = abstrakcje, luźne powiązania

Spis treści

1. Skąd pomysł na własną bibliotekę?
2. DORF - Domain Object Reactive Forms
3. Lekcje - Angular, TypeScript
4. Lekcje - npm, webpack, inne narzędzia
5. Próby promocji, rezultaty

Skojarzenia: Angular (2+)

@

Dekoratory

• Specyficzne funkcje
  • No bo co innego w JS?

• 
                                  // @DorfForm()
                              
                                  export function DorfForm(options?: IDorfFormOptions) {
                                    return function <D extends Function>(targetConstructor: D) {
                                      Object
                                       .defineProperties(targetConstructor.prototype, { /* props */ });
                                    }
                                  }
                              

• 
                                  import { Input } from '@angular/core';
                              
                                  export function DorfObjectInput() {
                                    return function (targetProto: any, propName: string) {
                                      Input()(targetProto, propName);
                                      targetProto.dorfObjectInForm = propName;
                                    };
                                  }
                              

• Angular miał kiedyś @View i @Component

Komponenty

• Myślenie o "building blockach"
• Klasa bazowa komponentu?
  • Yes, we can!

• 
                                  // @Component on the subclass
                                  export abstract class AbstractDorfFieldComponent<T, 
                                    M extends DorfFieldMetadata<T, IDorfFieldDefinition<T>>> {
                                      @Input()
                                      metadata: M;
                                      /* ... */
                                  }
                              

TypeScript

• Myślenie o API (w sensie pól i metod)
• Warto typować, ile się da

• 
                                  export type InputType = 'color' | 'date' | 'datetime' | 'email' | /* ... */;
                                  
                                  export interface IDorfInputDefinition<T> extends IDorfFieldDefinition<T> {
                                      type: InputType;
                                  }
                              

• 
                                  setDomainObjValue: (val: DomObj[keyof DomObj]) => { obj[propertyName] = val; }
                              

• Kompilacja AoT

  
                                  // order is defined as order?: number;
                                  get order(): number | undefined { return this.definition.order; }
                              

• TypeDoc - documentation generator

Spis treści

1. Skąd pomysł na własną bibliotekę?
2. DORF - Domain Object Reactive Forms
3. Lekcje - Angular, TypeScript
4. Lekcje - npm, webpack, inne narzędzia
5. Próby promocji, rezultaty

Webpack, karma

• Angular CLI ukrywa całą konfigurację
• Implementacja własna: dorf/config
  • karma
  • ts
  • webpack
• package.json

  
                                  "test": "karma start config/karma/conf.js"
                              

• config/karma/conf.js

  
                                  webpackConfig = require('../webpack/tests')
                              

GitHub

• CI? - Travis!
  • Zalogowanie się kontem GitHub
  • Wybranie predefiniowanego skryptu budowania
• Badge? Shields.io + markdown
• README
  • Badge na samej górze
  • Szybki przykład, quick win
  • Przykłady, przykłady, przykłady (w tym online)
  • Linki do dokumentacji, artykułów
• Strona www? Np. master + folder docs

Node, npm

• README - wyświetlane ciut inaczej niż na GitHubie
• .npmignore (domyślnie jak .gitignore)
  • dist oraz .d.ts NIE powinny być ignorowane
  • .ts powinny być
• Bardzo dużo ściągnięć zaraz po opublikowaniu nowej wersji
• Częste update'y = wyższa pozycja w wynikach wyszukiwania
• Semantic versioning (Major.Minor.Patch)
  • Kompatybilność wsteczna (np. DorfModule, DorfCoreModule)

Spis treści

1. Skąd pomysł na własną bibliotekę?
2. DORF - Domain Object Reactive Forms
3. Lekcje - Angular, TypeScript
4. Lekcje - npm, webpack, inne narzędzia
5. Próby promocji, rezultaty

Próby

• Twitter, odpowiednie hashtagi (max. 2 na post)
• Medium - artykuły pokazujące libkę
• Pluralsight - komentowanie pod tutorialem Reactive Forms in Angular
• StackOverflow - odpowiadanie w pytaniach o Angulara i reactive/model-driven/dynamic forms

Przyciąganie i potrzeby użytkownika

Wyniki

• 7 gwiazdek na GitHubie (moje pierwsze gwiazdki)
• +1000 pobrań w rekordowym dniu (29.08.2017)
• 300-400 pobrań miesięcznie (przed Angularem 5)
• +100 pobrań miesięcznie, nawet teraz
• Wzrost wiedzy i świadomości
  • Autorzy bibliotek/frameworków to też programiści, wcale nie superbohaterowie
  • Inne podejście, priorytety
  • Zrozumienie frameworka (a zwłaszcza jego wąskiej części)
• https://www.npmjs.com/package/dorf