Meine Geschichte der Implementierung der Offline-Habr-Anwendung

Das Erstellen einer eigenen Habr-Anwendung hat bei Habruzern bereits Tradition. Ich beschloss, Schritt zu halten und meine eigenen zu machen.

In diesem Artikel werde ich zunächst darüber sprechen, wie der Client für Habr erstellt wurde, welche architektonischen und technischen Lösungen sie haben, welche Voraussetzungen und Analysen sie haben, welche Schwierigkeiten es gab und zuletzt über die Funktionalität der Anwendung.

Hintergrund

Alles begann mit dem Vorschlag eines Freundes, Flutter auszuprobieren, aber es machte mir nichts aus.

, ? , , - ( ).

React+TypeScript VanilaJs, React Flutter.

, html , — , “”: html , - web-view. , .

- . , Dart , , ( Flutter : , .. , ui ).

:

• ui

  
  
  
  
  

• habr-storage - , , .

  
  
  
  
  

• habr-api - http .

  
  
  
  
  

, . MVVM.

UI

API html js . html . 

html Flutter, , : 

1. web-view

   
   
   
   
   

2. ( Flutter)

   
   
   
   
   

, , React Native, .

HTML

, , . iframe, , web-view. , , , . , .

:

1. 
   
   
   
   

2. 
   
   
   
   

3. 
   
   
   
   

, .. .

html , , . 

. html, div, . , , .. html, css . , - , " ".

html :

<div class="spoiler" role="button" tabindex="0">
  <b class="spoiler_title"> </b>
  <div class="spoiler_text"> </div>
 </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, details - .

2 :

1. html

   
   
   
   
   

2. 
   
   
   
   

html5. , :

• ( )

  
  
  
  
  

• 
  
  
  
  

•  

  
  
  
  
  

• ( /)

  
  
  
  
  

• 
  
  
  
  

• 
  
  
  
  

• Iframe

  
  
  
  
  

• 
  
  
  
  

• 
  
  
  
  

- . , .

Flutter RecyclerView Android, ListView. ( ), .

, : . - - , .. .

, - , , - , "" . , ui , ListView , N , , N .

, 1000 - , - .

. , . , . , , - ListView "" , . , .

Habr-API

m.habr.com/kek/v2/

API:

1. 
   
   
   
   

2. 
   
   
   
   

, , , , , , , - , , . , . – API .   

, API - . , API , . - .

Habr-Storage

Moor (Room, Dart) SQLite, - , . – Hive, NoSQL Key-Value , . , ( ), , .

SQLite html , (, ) , Hive. . 

SQLite. . url, , path . Path - url` . :

path = str(hash(url)) + str(datetime.now().millisecondsSinceEpoch)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Isolates

Dart , , , web-workers Isolate. , HTTP , JSON, , Flutter. 

- , -.

: Flutter . compute. 

– , , . :

1. . compute, , , , . 

   
   
   
   
   

2. . , , , middle, , , , , . . 

   
   
   
   
   

:

1. 
   
   
   
   

2. 
   
   
   
   

3. 
   
   
   
   

Für die Analyse- und Vorverarbeitungsoperation verwende ich weiterhin die Berechnungsmethode.

Fazit

Dies ist im Grunde alles, was ich über die interne Struktur der Anwendung erzählen möchte. 

Ich habe diesen Beitrag nicht als Werbung gedacht , aber der Wunsch, die Anwendung zu durchsuchen und den Code zu sehen, kann entstehen . Deshalb füge ich einen Link zu github hinzu .

Und dann ein paar Screenshots der Anwendung: