Hummingbird vs Angular Dart

Hummingbird julkistettiin 4.12. flutterin julkaisutilaisuudessa. Projekti, jonka avulla voimme koota flutter-sovelluksistamme täysimittaisia Progressive Web Apps -sovelluksia.

Angular Dart
Nykyversio AngularDartista on 5.2.0. Se on vakaa(on ollut jo muutaman vuoden), sitä käytetään Googlen vaikuttavissa projekteissa ja projekteissa ympäri maailmaa.

Hummingbird
Jotkut väittävät, että hummingbird on tällä hetkellä alfa-asteella. Meillä on kuitenkin vain tekninen yleiskatsaus. Enemmänkin ehdotus, jossa tiimi keskusteli perusteellisesti teknisistä suunnista, joita he harkitsevat. (TÄSSÄ: https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8)

Mitä he oikeastaan tekevät?

Hyvä että kysyit! Yritämme ymmärtää, mitä yksisivuiset sovellukset ovat, mitä progressiiviset verkkosovellukset ovat ja tarkastelemme Angularin ja Hummingbirdin odotettuja tuotoksia. Tämä auttaa meitä ymmärtämään ongelmia, joita ne aikovat ratkaista.

SPA:t vs. PWA:t

Yksisivuiset sovellukset

Yksisivuinen sovellus (Single Page Application, SPA) on verkkosovellus tai verkkosivusto, joka on vuorovaikutuksessa käyttäjän kanssa kirjoittamalla dynaamisesti uudelleen nykyisen sivun sen sijaan, että se lataisi kokonaisia uusia sivuja palvelimelta. – Wikipedia

Merkki #, kun se sisällytetään URL-osoitteisiin, aiheuttaa sivun uudelleenlataamisen sijasta jonkinlaista vuorovaikutusta sivun sisällä. SPA:t hyödyntävät tätä selaimen ominaisuutta.

Esimerkiksi Wikipediassa, jos napsautamme indeksissä olevaa otsikkoa, sen sijaan, että sivu latautuisi uudelleen, selain vie meidät sivun kyseiseen osaan.

• Mene osoitteeseen https://www.wikiwand.com/en/Single-page_application#/Ajax
• Vaihda Ajax:n tilalle Websockets ja paina enteriä.
• Latautuuko sivu uudelleen? Ei. Se yksinkertaisesti muuttaa konfiguraatiota

SPA:t vievät tämän seuraavalle tasolle. Koko sovellus ja kaikki sen näytöt toimivat yhdeltä sivulta käyttäen #pohjaisia URL-osoitteita kaikkiin toiminnallisuuksiinsa.

PWA:t

Progressiiviset web-sovellukset ovat käyttäjäkokemuksia, joilla on webin ulottuvuus ja jotka ovat luotettavia, nopeita ja mukaansatempaavia

– developers.google.com

PWA:t ovat verkkosivustoja (voivat olla tavallisia verkkosivustoja tai yhden sivun sovelluksia), jotka on optimoitu tietyllä tavalla siten, että ne

• Toimivat luotettavasti sekä offline-tilassa että epäluotettavassa internetissä (Lie-Fi)
• Ovat nopeita, optimoitu korkeaan havaittavaan suorituskykyyn
• Kiehtovia – Tuntuu kuin natiivisovellukselta eikä yhtään vähempää.

Mitä AngularDart tekee?
AngularDart tai Angular yleensä on kehys SPA:iden kirjoittamiseen. Se tarjoaa kehittäjille tavan kirjoittaa SPA:t, joissa on ominaisuuksia, kuten:

• Kaksisuuntainen datan sitominen
• Reititys
• Templatointi
• Direktiivit

Ja paljon muuta. Varsinainen käyttöliittymä kirjoitetaan edelleen HTML:llä + CSS:llä. Angular tarjoaa vain kaiken muun, jonka avulla web-kehittäjät voivat kehittää SPA:t. Pääpointti on:

• Angular Dart ei ole UI Framework
• Angular Dart sovellukset voivat olla tai eivät voi olla PWA:ita

Mitä Angular Web Components sitten on?
Ne ovat joukko angular_components-paketin tarjoamia materiaalisuunnittelukomponentteja, jotka toimivat malleina, joiden avulla voidaan rakentaa sovelluksia.

• Ne eivät ole tuettuja Internet Explorerissa
• Ne ovat edelleen kirjoitettu HTML + CSS + Dartilla

Mitä Hummingbird tulee tekemään?
Toistaiseksi se on vain spekulaatiota. Sen tarkoituksena on muuntaa mikä tahansa flutter-sovellus PWA:ksi. Se voi olla tai ei voi olla SPA(todennäköisesti tulee). Silti se yrittää tehdä kaiken mitä flutter tekee.

Sen avulla voisimme käyttää Flutter UI Frameworkia, käyttää kaikkia flutter SDK:n ominaisuuksia, kuten tilanhallintawidgetit ja kaikki… ja yhdellä klikkauksella tuottaa PWA:n jo olemassa olevien Android- ja iOS-sovellusten rinnalle!

Matkalla on monia haasteita, mutta jos Google tajuaa tämän, siitä tulee SDK:iden kaikkivaltias.

All-Dart-sovellusten tila

Koitetaanpa yrittää ymmärtää Flutter+AngularDart- ja Flutter+Kolibri-kombinaatioiden eroa, jos kirjoittaisimme all-tikka-sarjan sovelluksia webiin ja natiiviin.

ESILLÄ: Flutter + Angular Dart
Tällaisen sovelluksen kirjoittamiseen tarvitsemme:

• Kirjoittaa ydinpaketti, joka sisältää kaiken liiketoimintalogiikan, varmistaen, että sillä ei ole Angular- tai Flutter-riippuvuuksia ja että kaikki tällaiset riippuvuudet injektoidaan siihen ulkopuolelta
• Kirjoittaa Angular PWA:n, joka tilaa ytimestä kaikki toiminnallisuudet
  * Käyttöliittymä HTML:llä + CSS:llä tai sommittelemalla Angular-komponentteja
  * Reititys, tilanhallinta Angularin toimintatavalla
• Kirjoita Flutter-sovellus, joka tilaa saman ytimen kaikkien toiminnallisuuksien osalta
  * Käyttöliittymä flutterin UI-kehyksellä
  * Reititys, tilanhallinta jne. flutterin toimintatavalla
• Kompiloi iOS:lle ja Androidille flutter-projektista
• Kompiloi Webiin Angular-projektista

Vähentääkö koodin jakaminen työmäärää?
Vaikka koodin jakaminen varmasti vähentää ”koodin määrää”, kokemukseni mukaan se ei ole oikeastaan vähentänyt tehtävän työn määrää. Se vaatii minulta paljon enemmän harkintaa prosessin aikana.

Mitkä ovat sitten hyödyt?

• Koodi on siistimpää ja arkkitehtuuri parempaa
• Minun on pakko, ja minun on nyt helpompi ylläpitää ominaisuuksien yhdenmukaisuutta eri alustoilla.

Tulevaisuus: Flutter + Hummingbird
Tällaisen sovelluksen kirjoittamiseen tarvitaan:

• Kirjoittaa flutter-sovellus
  * Käyttöliittymä flutter-kehyksellä
  * Reititys, tilahallinta yms. flutterin tapaan
• Kompiloida kolmella eri alustalla
• Tehdään.

Onko se vähemmän työtä?
Helvetti kyllä!

Konkluusio

Näin se on. Erittely siitä, mitä tiedämme flutterista, angular dartista, hummingbirdistä ja koodin jakamisesta keskenään.

Jos olet kehittämässä jotain juuri nyt…
Valitse flutter + angular dart. Se ei ole yhtä helppo kuin hummingbird unelma, mutta on silti paras tapa.

Hummingbird on tällä hetkellä kaukainen haave. Projekti, jonka toteutumista pitäisi ehdottomasti toivoa jonain päivänä ja tukea kaikin voimin, mutta Dilli abhi door hai (tuo tulevaisuus on kaukana).