SPA basé sur un navigateur indépendant du framework

1. Mais ... pourquoi?

1. Il existe un grand nombre de frameworks pour développer  SPA  (Single Page Application).

   
   
   
   
   

2. Il existe une énorme quantité de documentation qui illustre comment créer une application basée sur un cadre spécifique.

   
   
   
   
   

3. Cependant, une telle documentation place le cadre au premier plan. Ainsi, transformer le cadre d'un détail de mise en œuvre en un facteur déterminant. Ainsi, une partie importante du code est écrite non pas pour répondre aux besoins de l'entreprise, mais pour répondre aux besoins du framework.

   
   
   
   
   

Compte tenu de la façon dont le développement de logiciels axé sur le battage publicitaire est de nos jours, vous pouvez être sûr que dans quelques années, il y aura de nouveaux cadres à la mode pour le développement front-end. Au moment où le framework sur la base duquel l'application est construite se démode, vous êtes obligé de maintenir la base de code héritée ou de démarrer le processus de transfert de l'application vers un nouveau framework.

Les deux options sont préjudiciables à l'entreprise. Le maintien d'une base de code obsolète entraîne des problèmes d'embauche de nouveaux développeurs actuels et de motivation. Le transfert d'une application vers un nouveau framework coûte du temps (et donc de l'argent) mais n'apporte aucun avantage commercial.

Cet article est un exemple de création d'un SPA à l'aide de principes de conception d'architecture de haut niveau. Ce faisant, des bibliothèques et des frameworks spécifiques sont choisis pour répondre aux responsabilités définies par l'architecture souhaitée.

2. Objectifs et limites de l'architecture

Objectifs:

1. Un nouveau développeur peut comprendre le but d'une application avec un coup d'œil rapide sur la structure du code.

   
   
   
   
   

2. La séparation des préoccupations est favorisée et donc la modularité du code afin que:

   
   
   
   
   

   • Les modules sont faciles à tester

     
     
     
     
     

   •   (boundaries)          .       « »

     
     
     
     
     

3.     .  ,       .

   
   
   
   
   

4. . ( )     , .

   
   
   
   
   

5.      .

   
   
   
   
   

6.     . ,     .

   
   
   
   
   

:

 .   (  ) HTML+CSS  JavaScript .

3.

  .   : (layered), (onion)   (hexagonal).    .

  / SPA . (domain)   (application) . ,  —   .

     ,   .

  (  Ports and Adapters)     .    localStorage  TodoMVC      ( boundaries/local-storage).

4. . SPA ?

.

.      :

 1: ,  

?   2  .

 2: ,   1

  ‘shared’ UI , , , .

  ( ) . ‘’       ‘parts’. ( 3).

 3: ‘parts’

, ’goods catalogue’. ‘goods-catalogue/parts/goods-list/parts/good-details.js’     .    —  .

  «parts»   .   4.

 4:   ‘parts’

‘goods-catalogue/goods-list’  . goods-list.js () — ,   .   , - (js, html, css)   ,  ,     .

:

1.  — .

   
   
   
   
   

   • goods-list      , .

     
     
     
     
     

   • filters    ,   .

     
     
     
     
     

2. (    )    —   «_».     .

   
   
   
   
   

   • _goods-list folder   goods-catalogue    .

     
     
     
     
     

   • goods-list.js   _goods-list   .

     
     
     
     
     

   • _good-details.js   _goods-list  .

     
     
     
     
     

 5: «_»   

!         , .   .  pages   components   5.      HTML        component.    components  , «» .

5. . JavaScript?

  JavaScript. .      (  1-20),   ...

 ,  .   .  4-     . ,   4 .        .  ,    2015 ,      .   ,   ,   .

JavaScript (babel)   JavaScript,    «  » JavaScript.    — ,   .

,    — TypeScript  :

•  

  
  
  
  
  

• - JavaScript, JavaScript

  
  
  
  
  

• (typings) JavaScript . , npm .   ,   TypeScript .   -.

  
  
  
  
  

:   asm.js, blazor  elm     

6.  

, : HTML, CSS, JavaScript. ,   4: , .

  [6.1]  HTML  CSS    .

HTML     . ,  underscore.js, handlebars.js.   ,       .

  [6.2]  TypeScript ,   ().          .

UI        . HTML   HTML . . .        .    ,        .

  [6.3]       . .

[6.4]    :

• ,   .

  
  
  
  
  

•   .     .

  
  
  
  
  

•   Domain  Application.     ,    Dependency Injection.  .

  
  
  
  
  

  —        .   .  ,   , ----html-.     . , .

, , .   , .  :

• , ..   .

  
  
  
  
  

• ..   .

  
  
  
  
  

,  [6.5] — TypeScript . , .

 , :

• (Components) — HTML + CSS

  
  
  
  
  

• (ViewModels) — , , (  ).

  
  
  
  
  

• (ViewModel facades) — ,   .

  
  
  
  
  

 6:  

• - . .

  
  
  
  
  

•   ().

  
  
  
  
  

•    — . / .   «shared».

  
  
  
  
  

•  — .    /.

  
  
  
  
  

?   6  . ()   .    ,    .

  [6.6] — .

 7:        

7.

    .      — .

7.1.

- tsx ( jsx). tsx ,  React, Preact and Inferno. Tsx   HTML,     / HTML.  tsx ..     HTML, .

  ,   , ,   JSX .        React.

:         React.  react hooks  -     . API React     ,   .

,   .   UI=F(S)

• UI —

  
  
  
  
  

• F —

  
  
  
  
  

• S — (   — )

  
  
  
  
  

:

interface ITodoItemAttributes {
  name: string;
  status: TodoStatus;
  toggleStatus: () => void;
  removeTodo: () => void;
}

const TodoItemDisconnected = (props: ITodoItemAttributes) => {
  const className = props.status === TodoStatus.Completed ? 'completed' : '';
  return (
    <li className={className}>
      <div className="view">
        <input className="toggle" type="checkbox" onChange={props.toggleStatus} checked={props.status === TodoStatus.Completed} />
        <label>{props.name}</label>
        <button className="destroy" onClick={props.removeTodo} />
      </div>
    </li>
  )
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

  todo  TodoMVC .

   —   JSX. .     ,   «».

   [6.1]  [6.2].

:   react  TodoMVC     .

7.2. ()

,     TypeScript   -:

• .

  
  
  
  
  

•   domain/application dependency injection.

  
  
  
  
  

,   , .

(reactive UI).   .  WPF (C#)   Model-View-ViewModel.  JavaScript ,   (observable) (stores)  flux.    ,   :

• .

  
  
  
  
  

• ,          .

  
  
  
  
  

• .

  
  
  
  
  

,    .

  :

• , ,     .

  
  
  
  
  

•          ,   .

  
  
  
  
  

  mobx  , . :

class TodosVM {
    @mobx.observable
    private todoList: ITodoItem[];

    // use "poor man DI", but in the real applications todoDao will be initialized by the call to IoC container 
    constructor(props: { status: TodoStatus }, private readonly todoDao: ITodoDAO = new TodoDAO()) {
        this.todoList = [];
    }
    public initialize() {
        this.todoList = this.todoDao.getList();
    }
    @mobx.action
    public removeTodo = (id: number) => {
        const targetItemIndex = this.todoList.findIndex(x => x.id === id);
        this.todoList.splice(targetItemIndex, 1);
        this.todoDao.delete(id);
    }
    public getTodoItems = (filter?: TodoStatus) => {
        return this.todoList.filter(x => !filter || x.status === filter) as ReadonlyArray<Readonly<ITodoItem>>;
    }
/// ... other methods such as creation and status toggling of todo items ...
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

   mobx ,     .

     mobx   .   mobx.       .

 {status: TodoStatus}



.   [6.6].      . :

interface IVMConstructor<TProps, TVM extends IViewModel<TProps>> {
    new (props: TProps, ...dependencies: any[]) : TVM;
}
interface IViewModel<IProps = Record<string, unknown>> {
    initialize?: () => Promise<void> | void;
    cleanup?: () => void;
    onPropsChanged?: (props: IProps) => void;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. :

• 
  
  
  
  

• 
  
  
  
  

• (-).

  
  
  
  
  

   , ( statefull).      .

  7, .   DOM(mounted)      (unmounted).   (higher order components).

:

 type TWithViewModel = <TAttributes, TViewModelProps, TViewModel>
  (
    moduleRootComponent: Component<TAttributes & TViewModelProps>,
    vmConstructor: IVMConstructor<TAttributes, TViewModel>,
  ) => Component<TAttributes>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

moduleRootComponent, :

•   (mount) .

  
  
  
  
  

• () (unmount).

  
  
  
  
  

      TodoMVC . .. IoC ,   .

:

const TodoMVCDisconnected = (props: { status: TodoStatus }) => {
    return <section className="todoapp">
        <Header />
        <TodoList status={props.status} />
        <Footer selectedStatus={props.status} />
    </section>
};
const TodoMVC = withVM(TodoMVCDisconnected, TodosVM);

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

  ( ,   ),  <TodoMVC status={statusReceivedFromRouteParameters} />



. ,  TodosVM



  -  TodoMVC



.

,   , withVM.

• TodoMVCDisconnected    

  
  
  
  
  

• TodoMVC  ,    

  
  
  
  
  

• TodosVM  . , ,    mobx .

  
  
  
  
  

:    ,  withVM   react context API.     . ,        —  connectFn   .

7.3.

  , / .   6        .   .

«» , ( )   /, .   (slicing function). , ,   ?

 8: ( /slicing function)

  (  ):

type TViewModelFacade = <TViewModel, TOwnProps, TVMProps>(vm: TViewModel, ownProps?: TOwnProps) => TVMProps
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

  connect   Redux.    mapStateToProps



, mapDispatchToActions



  mergeProps



   — ,   .  TodoItemDisconnected



   TodosVM



.

const sliceTodosVMProps = (vm: TodosVM, ownProps: {id: string, name: string, status: TodoStatus; }) => {
    return {
        toggleStatus: () => vm.toggleStatus(ownProps.id),
        removeTodo: () => vm.removeTodo(ownProps.id),
    }
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:   , ‘OwnProps’ -    react/redux.

 —   .      withVM



. ,  ,   — ,  :

type connectFn = <TViewModel, TVMProps, TOwnProps = {}>
(
    ComponentToConnect: Component<TVMProps & TOwnProps>,
    mapVMToProps: TViewModelFacade<TViewModel, TOwnProps, TVMProps>,
) => Component<TOwnProps>
const TodoItem = connectFn(TodoItemDisconnected, sliceTodosVMProps);

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

  todo : <TodoItem id={itemId} name={itemName} status={itemStatus} />

 connectFn



  :

•  TodoItemDisconnected



    sliceTodosVMProps
  
  
  
   —        JSX.

  
  
  
  
  

• , , , .

  
  
  
  
  

   connectFn  TodoMVC ,   .

8.

,   ,  . TypeScript , , TSX —    .

SPA .     SPA  «   »  «   ».

 ,       ?

-  mobx, react  mobx-react   , :

•  mobx

  
  
  
  
  

• - , .   TodoMVC    react-router  react-router-dom.

  
  
  
  
  

•   , , JSX.

  
  
  
  
  

,     .

  , .

      . React   ,        .

P.S.      SPA:

•     React/Redux:  reducers, action creators  middlewares. ( stateful). time-travel. . connect     . Redux-dirven        connected  .     ,   .

  
  
  
  
  

•    vue: TSX.    ,   , . Vue.js     ‘data’,’methods’,  .. vue-    .

  
  
  
  
  

•    angular: TSX. angular-    .   (two-way data binding). : , ,  .

  
  
  
  
  

•     react   (hooks,  useState/useContext): .   , -      . :

  
  
  
  
  

  •   .

    
    
    
    
    

  • useEffect ‘deps’ .

    
    
    
    
    

  •   .

    
    
    
    
    

  •     .

    
    
    
    
    

  , (   — useEffect) .   ,   «», « (mental model)» « (best practices)».      react.      :

  
  
  
  
  

  •   ?

    
    
    
    
    

  • ,   /     , ?  —     . :    

    
    
    
    
    

•    react-mobx .   react-mobx     .   .   .

  
  
  
  
  

• Comparé à  mobx-state-tree : Les Viewmodels sont des classes régulières et ne nécessitent pas l'utilisation de fonctions de bibliothèques tierces, ni ne doivent satisfaire l'interface définie par des frameworks tiers. La définition de type  à l'intérieur de l'arborescence d'état de mobx repose sur les fonctions spécifiques de ce paquet. L'utilisation de mobx-state-tree en conjonction avec TypeScript provoque la duplication des informations - les champs de type sont déclarés comme une interface TypeScript distincte mais doivent être répertoriés dans l'objet utilisé pour définir le type.

  
  
  
  
  

L'article original en anglais dans le blog de l'auteur (moi)