Créer votre propre application Habr est déjà devenu une tradition chez les Habruzers. J'ai décidé de suivre et de créer le mien.
Dans cet article, je parlerai tout d'abord de la création du client pour Habr, des solutions architecturales et techniques, de leurs prérequis et de leur analyse, des difficultés rencontrées, et enfin de la fonctionnalité de l'application.
Arrière-plan
Tout a commencé avec la suggestion d'un ami d'essayer Flutter, mais cela ne me dérangeait pas.
, ? , , - ( ).
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, , :
web-view
( Flutter)
, , React Native, .
HTML
, , . iframe, , web-view. , , , . , .
:
, .. .
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 :
html
html5. , :
( )
-
( /)
-
-
Iframe
-
-
- . , .
Flutter RecyclerView Android, ListView. ( ), .
, : . - - , .. .
, - , , - , "" . , ui , ListView , N , , N .
, 1000 - , - .
. , . , . , , - ListView "" , . , .
Habr-API
m.habr.com/kek/v2/
API:
, , , , , , , - , , . , . – 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.
– , , . :
. compute, , , , .
. , , , middle, , , , , . .
:
Pour l'opération d'analyse et de prétraitement, j'utilise toujours la méthode de calcul.
Conclusion
C'est essentiellement tout ce que je voudrais dire sur la structure interne de l'application.
Je n'ai pas prévu ce post comme une publicité, mais le désir de piquer l'application et de voir le code peut surgir, alors je joins un lien vers github .
Et puis quelques captures d'écran de l'application:
