Hummingbird: Internet uchun flutter yaratish

Bugun Flutter Live-da biz Internetda Flutter-ni ishga tushirish bo'yicha tajriba o'tkazayotganimizni e'lon qildik. Ushbu postda biz qiyinchiliklarga qanday yondashayotganimizni va texnologiyaning hozirgi holatini tasvirlaymiz. Xabarning oxirida interoping va ichki qismga oid savollarga javob topasiz.

Flutter arxitekturasini tezkor yangilash bilan boshlaylik. Flutter ko'p qatlamli tizim bo'lib, undan yuqori qatlamlardan foydalanish osonroq va oz kod bilan ko'p narsani ifodalashga imkon beradi, pastki qatlamlar esa ba'zi murakkabliklar bilan shug'ullanish hisobiga sizga ko'proq boshqaruv beradi. Agar yuqori qatlam ishlab chiqaruvchi xohlagan narsani bajarmasa, ular pastki qavatga tushishi mumkin. Ishlab chiquvchilar Flutter Engine ustidagi barcha qatlamlarga kirish huquqiga ega.

Mobil arxitektura uchun flutter

Flutter dvigateli Flutterda eng past darajadagi kutubxona sifatida tanilgan: ui. Vidjetlar, fizika, animatsiya yoki tartib haqida hech narsa bilmaydi (matn tartibidan tashqari). Ekranda rasmlarni qanday yaratishni va ularni pikselga aylantirishni biladigan narsa shundaki. To'g'ridan-to'g'ri dartning tepasiga ariza yozish qiyin bo'ladi: ui. Shu sababli yuqori qatlamlar yaratildi.

Dart yuqoridagi hamma narsa: ui biz "ramka" deb atashni yaxshi ko'radigan narsa. Uning ostida hamma narsa "dvigatel". Frame butunlay Dart dasturlash tilidan foydalangan holda yozilgan. Dvigatelning ko'p qismi C ++ tilida yozilgan, Android-ga tegishli qismlar Java-da, va iOS-ga tegishli qismlar Objective-C-da yozilgan. Dart dagi ba'zi asosiy sinflar va funktsiyalar: ui Dart tilida yozilgan va asosan Dart va C ++ o'rtasida ko'prik vazifasini o'taydi.

Flutter shuningdek, plagin tizimini taklif qiladi. Plaginlar bu OEM kutubxonalariga va uchinchi tomon kutubxonalariga to'g'ridan-to'g'ri kirish imkoniga ega bo'lgan tilda yozilgan kod bo'lib, vaqt o'tishi bilan mobil ekotizimlar to'plagan. Android uchun plagin yaratish uchun siz Java yoki Kotlin-ni yozgan bo'lar edingiz. IOS plaginlari Objective-C yoki Swift-dan foydalanib yozilgan.

Salom, Internet

Veb-platforma o'nlab yillar davomida rivojlanib bormoqda va ko'plab texnologiyalar va texnik xususiyatlarni o'z ichiga oladi. Tegishli xususiyatlarning katta to'plamlarini tavsiflash uchun bir nechta soyabon atamalari mavjud: HTML, CSS, SVG, JavaScript, WebGL. Flutter-ni Internetda ishlatish uchun bizga quyidagilar kerak:

  • Dart kodini tuzing: Flutter Dart-da yozilgan va biz Internetda Dartni ishga tushirishimiz kerak.
  • Internetda ishlash uchun Flutter-ning pastki to'plamini tanlang: Internetdagi barcha Flutter kodini ishlatish amaliy yoki foydali emas. Ulardan ba'zilari Android va iOS bitlari kabi o'ziga xos platformaga tegishli.
  • Veb-funktsiyalarning etarli to'plamini tanlang: vaqt o'tishi bilan Web Platformada funktsiyalar bir-biriga zid bo'lgan xususiyatlar to'plandi. Masalan, HTML + CSS, SVG, Tuval va WebGL-dan foydalanib grafika chizishingiz mumkin.

Dart tili mavjud bo'lgan vaqtdan beri JavaScript-ni tuzib keladi. Dartdan JavaScript-ga qadar ko'plab muhim dasturlar tuziladi va bugungi kunda ishlab chiqarishda ishlaydi. Flutterning tuzish strategiyasi xuddi shu infratuzilishga tayanadi.

Izlanishni boshlaganimizda, biz UIni ko'rsatishda bir nechta tanlovga duch keldik. Biz tezda qo'llab-quvvatlamoqchi bo'lgan Flutter qatlamlari biz amalga oshirish uchun foydalanadigan veb-texnologiyalarni aytib berishini tezda angladik. Biz uchta prototipni yaratdik:

  1. Faqat vidjetlar: Ushbu prototip Flutter-ning vidjet doirasini amalga oshirdi va maxsus vidjetlarni yaratish uchun poydevor sifatida asosiy maket vidjetlarini taklif qildi. Joylashtirish va joylashish uchun u Internetning ichki imkoniyatlariga, masalan, fleksbox, panjara tuzilishi, brauzer orqali toshib o'tish: o'tish va hk.
  2. Vidjetlar + maxsus tartib: Ushbu prototip Flutter-ning tartib tizimini (RenderObject tomonidan taqdim etilgan) o'z ichiga olgan, ammo xaritada ob'ektlarni to'g'ridan-to'g'ri HTML elementlariga taqdim etgan.
  3. Flutter Web Engine: Ushbu prototip dartning ustidagi barcha qatlamlarni saqlab qoldi: ui va dart: ui brauzerda ishlaydi.

Flutter-ning eng muhim xususiyatlaridan biri shundaki, u platformalarda ko'chma. Siz platformaga xos bo'lgan maxsus kodni yoza olishingiz mumkin (va ba'zan rag'batlantirilishi mumkin), lekin platformalarda turli xil bo'lishi kerak bo'lmagan kodni almashish mumkin. Bu bitta platformali bazaga ega bo'lgan bir nechta platformalarga qaratilgan dasturlarni yozishga imkon beradi.

Bir nechta namunaviy ilovalarni Internetga yuklashga urinib ko'rganimizdan so'ng, №1 va №2 prototiplari Flutter dasturchilariga yoqadigan portativlik darajasini ta'minlay olmasligini tushunib etdik. Shuning uchun biz Flutter Web Engine dizayni # 3 prototipini yaratishga qaror qildik, chunki bu platformalar orasida eng yuqori darajadagi ramka-kodni qayta ishlatishga imkon beradi:

Veb Arxitektura uchun flutter (Hummingbird)

Endi biz butun dartni amalga oshirishni xohlayotganimizni bilganimizdan so'ng: ui API-ni o'rnatish uchun veb-texnologiyalar to'plamini tanlashimiz kerak. Flutter UI-ni bir vaqtning o'zida bitta ramkaga soladi. Har bir ramka ichida Flutter vidjetlar quradi, sxemasini tuzadi va nihoyat ularni ekranda chizadi.

Vidjetlarni qurish

Vidjetni yaratish mexanizmi ilova ishlayotgan muhitga bog'liq emas. Jarayon shunchaki xotiradagi ob'ektlarni ishga tushiradi, ularning holatini kuzatadi va holat o'zgarganda tizim, sath va bo'yoqning pastki darajalari uchun zarur bo'lgan minimal yangilanishlarni hisoblab chiqadi. . Ushbu qismni Internetga to'g'ridan-to'g'ri yuborish edi. Dart jamoasi dart2js-da super-mixin-ni qo'llab-quvvatlaganidan so'ng, kompilyator barcha vidjetlar va vidjet doirasini JavaScript-ga deyarli hech qanday muammosiz yubordi.

Tartib

Joylashtirish tizimi biroz hiyla-nayrang. Eng katta qiyinchilik matnni joylashtirish edi. Qolgan barcha narsalar - Markaz, Satr, Ustun, Stack, O'tkazilishi mumkin, Padding, o'rash va hk

Flutter-da siz Paragraf ob'ekti yaratib va ​​uning sxemasini () usulini chaqirib, matnning paragrafini tuzasiz. Afsuski, Internetda to'g'ridan-to'g'ri matn joylashtirish uchun API mavjud emas. Matnni tuzish xususiyatlarini o'lchashda biz ishlatgan hiyla brauzerni tuzishiga olib keldi va keyin DOM elementlaridan tegishli xususiyatlarni qayta o'qib chiqishga undadi.

Flutter matni paragrafini tuzishda xatboshining balandligini, kengligini, ichki ichki kengligini, minimal ichki kengligini va alifbo va mafkuraviy asoslarni o'lchaydi. Ushbu xususiyatlar quyida ko'rsatilgan.

Paragraf tuzilish xususiyatlari

Siz ko'proq ma'lumotni Flutter Paragistr hujjatidan topishingiz mumkin.

Ushbu xususiyatlarni o'lchash uchun avval HTML DOM elementiga paragraf qo'yamiz, so'ng elementning o'lchamlarini o'qiymiz. Bu brauzer uni yotqizishiga olib keladi. Masalan, elementning kengligi va balandligini olish uchun biz ofsetWidth va uning birodarligi, offsetHeight deb nomlaymiz. Asosiy satrni o'lchash uchun biz xatboshni egiluvchi satr yordamida chiqib ketish uchun sozlangan elementga joylashtiramiz. Paragraf yonida biz "prob" deb nomlangan boshqa elementni joylashtiramiz. Tekshiruv matnning boshlang'ich chaqiruvi getBoundingClientRect bilan uyg'unlashganligi sababli bizga asosiy ma'lumot beradi. Biz minimal va maksimal ichki kengliklarni o'lchash uchun shunga o'xshash fokuslardan foydalanamiz.

Rassomchilik

Va nihoyat, biz vidjetlarni bo'yashimiz kerak. Ushbu yo'nalish bizning kashfiyotimiz davomida eng jiddiy o'zgarishlarni ko'rdi va u hali ham biz uchun eng faol tadqiqot yo'nalishlaridan biri hisoblanadi. Freym oxirida bizning barcha vidjetlarimiz ekrandagi piksellarga aylantirilishi kerak. Brauzerda bu HTML / CSS, Tuval, SVG va WebGL birikmalariga qaytarilishi kerakligini anglatadi.

Biz hali WebGL-ni ko'rib chiqmadik, asosan pastligi va biz brauzerlar bajarishi mumkin bo'lgan ishlarni, masalan, matnni tuzish va 2D grafikani rastrlash kabi narsalarni qayta to'ldirishni talab qilishimiz, ammo biz qanday qilib kirish, matnni tanlash, Flutter bo'lmagan tarkibiy qismlardan iborat kompozitsiya WebGL bilan ishlashi mumkin.

Bizning dastlabki prototiplarimizdan biri har bir RenderObject uchun HTML elementini yaratdi. Biz umidvor natijalarga erishdik, ammo bu juda katta API o'zgarishiga olib keldi. Flutter bilan katta kodli deltani saqlashimiz kerak edi, shuning uchun biz bu g'oyani ilgari surdik.

Ayni paytda biz bir vaqtning o'zida ikkita yondashuvni o'rganmoqdamiz:

  • HTML + CSS + Tuval
  • CSS Paint API

HTML + CSS + Tuval

Ushbu yondashuv yordamida biz ramka tomonidan yaratilgan rasmlarni HTML + CSS-dan foydalanadigan va Canvas 2D-dan foydalanib aniqlanadigan rasmlarga ajratamiz. Keyin HTML, CSS va 2D rasmlarni birlashtirgan HTML DOM chiqamiz.

Biz HTML + CSS-ni afzal ko'ramiz, chunki u brauzerning ko'rsatiladigan ro'yxati bilan ta'minlanadi. Bu shuni anglatadiki, biz rasmlarning rastrlanishini optimallashtirishni brauzerning ishlash tizimiga qoldiramiz. Bu shuningdek, o'zboshimchalik bilan amalga oshiriladigan o'zgarishlarni, ayniqsa aylanishlarni va masshtablashni, piksellash haqida qayg'urmasdan qo'llashimiz mumkin degan ma'noni anglatadi. Biz bu tuvalni DomCanvasni amalga oshirish deb ataymiz.

Agar biz HTML + CSS-dan foydalanib rasmni ifoda eta olmasak, biz tuvalaga qaytamiz. Tuval 2D Flutter chizish buyruqlarining deyarli barchasini bo'yashga imkon beradi. Agar siz Flutterning Tuvalini Internetning CanvasRenderingContext2D bilan taqqoslasangiz, siz ko'p o'xshashliklar topasiz. Tuval ustiga bo'yash samarali bo'ladi, chunki HTML DOM yoki SVG singari vaqt o'tishi bilan parvarish qilinishi kerak bo'lgan o'zgaruvchan tugun daraxtini yaratmaydi.

2D kanvas bilan bitta muammo shundaki, brauzerlar uni bitmap, kengligi x balandligi piksellarini saqlaydigan xotira buferi sifatida taqdim etadi. Natijada, tuvalni kattalashtirish pikselga olib keladi. Agar masshtablash rasmning o'lchamiga olib kelsa, biz rasmning o'lchamini o'zgartirishimiz kerak. Tuvallarni ajratish ancha qimmatga tushishini va ularning hajmini o'zgartirishni aniqladik. Buning ustiga, bir nechta rasmlarni bitta sahifaga joylashtirganda, brauzer bizning profilimizda ko'rinadigan rastrli kompozitsiyani bajarishi kerak. Birlashtiruvchi rasterlar displey ro'yxatlaridan farq qiladi. Siz bir nechta displey ro'yxatlarini bir xil xotira buferiga bo'yashingiz mumkin. BitmapCanvas - Canvas 2D-asosidagi kanvasni amalga oshirish deymiz. Bitmap rasmlarini yanada samaraliroq qilish usullarini o'rganmoqdamiz.

Flutterning shaffofligini, o'zgartirish, ofset, qisqich va boshqa qatlamlarni ifodalash uchun biz oddiy HTML elementlardan foydalanamiz. Masalan, shaffoflik qatlami elementiga aylanadi, undagi noaniq CSS atributi, transformator qatlami CSS atributiga ega bo'lgan elementiga aylanadi va clip rect toshib ketish bilan: yashirin.

Barchasi aytilib, bajarilgandan so'ng, varaqqa DomCanvas va BitmapCanvalar yordamida HTML elementlari daraxti sifatida sahifa barglari tugunlari sifatida ramka qo'yiladi. Masalan:

Freymning HTML DOM tuzilishiga misol

Flutter dvigatelidagi ekvivalent Flutter qatlami daraxti (oqim qatlami deb ataladi) quyidagicha ko'rinishga ega bo'ladi:

Flutter Dvigatel qatlamining tuzilishiga namuna

Tarkibiy jihatdan ular juda o'xshash. Eng katta farq shundaki, Internetda biz ularning tarkibiga qarab rasmlar uchun turli xil dasturlarni tanlashimiz kerak.

HTML + CSS + Tuval barcha zamonaviy brauzerlarda ishlaydi. Biroq, biz kelajakka boqmoqdamiz:

CSS Paint API

CSS Paint - bu yangi Web API va katta kuchning bir qismi, Xudini. Xoudini - bu CSS dvigatelining ba'zi qismlarini ishlab chiquvchilarga etkazish uchun ko'plab brauzer sotuvchilari o'rtasidagi hamkorlik. Xususan, CSS Paint API ishlab chiquvchilarga grafika elementlarini HTML elementlariga bo'yashga imkon beradi. Masalan, CSS rassomiga elementlarning orqa fonini bo'yashni tayinlashingiz mumkin. Tuvalga juda o'xshash, ammo quyidagi muhim farqlar bilan:

  • Rasm asosiy JavaScript izolatsiyasi bilan emas, balki bo'yoq ishchi varag'i deb nomlangan narsa bilan amalga oshiriladi. Bu bir oz veb-ishchiga o'xshaydi, chunki u o'zining xotira maydoniga ega. DOM-ga o'zgartirishlar kiritilgandan so'ng, bo'yoq bilan ishlaydigan dastgoh brauzerning bo'yash davrida amalga oshiriladi.
  • CSS bo'yoq bitmap emas, balki ekran ro'yxati bilan ta'minlanadi. Bu bizga ikkala dunyoning eng yaxshisini beradi - 2D tuvalga o'xshash rasm samaradorligi va piksellarsiz.
  • Hozirgi vaqtda CSS bo'yoq matni bo'yashni qo'llab-quvvatlamaydi.

Ushbu yozuvdan kelib chiqib, Chrome va Opera CSS Paint-ni ishlab chiqarishda qo'llab-quvvatlaydigan yagona brauzerlardir. Ammo, boshqa brauzerlar ularni amalga oshirishning turli bosqichlarida.

Veb uchun Flutter-da biz CSS Paint API-ni eksperimental jihatdan qo'llab-quvvatlaymiz va bu allaqachon yaxshi natijalarni, ayniqsa ishlashda ham ko'rsatmoqda. Bizning amaliyotimiz oddiy bo'yoq buyruqlarini CSS xususiyatlariga seriyalashtiradi. Bo'yoq ishchi qo'llanmasi ushbu buyruqlarni o'qiydi va ularni bajaradi. Matnni oddiy

va HTML elementlaridan foydalangan holda chiqaramiz.

Bizning hozirgi seriyalash mexanizmimiz unchalik unchalik samaraliroq emas - bu JSON-ga aylantirilgan ichki ro'yxatlar daraxti - lekin Houdini loyihasining bir qismi terilgan qatorlarga qo'llab-quvvatlashni qo'shishdir. U mavjud bo'lganda biz bo'yoq buyruqlarini JSON satrlari o'rniga yozilgan qatorlar sifatida kodlaymiz. Yozilgan qatorlarni uzatish mumkin, ya'ni ularni asosiy izolyatsiyadan bo'yoq bilan ishlov berish dastgohiga yo'naltirish mumkin. Xotiradan nusxa ko'chirish amalga oshirilmaydi.

Interop va ichki qism

Flutterdan Dart kutubxonalariga qo'ng'iroq qilish

Flutter veb-ilovalari bugungi kunda Internetda ishlaydigan Dart kutubxonalaridan to'liq foydalanish imkoniyatiga ega.

Flutter-dan JavaScript kutubxonalariga qo'ng'iroq qilish

Flutter veb-ilovalari Dartning JS-interop paketlarini to'liq qo'llab-quvvatlaydi: pack: js and dart: js.

Flutter veb-ilovalarida CSS-dan foydalanish

Hozirgi vaqtda Flutter veb-sahifaning to'g'ri va ishlashi ustidan to'liq nazoratni o'z zimmasiga oladi. Masalan, biz faqat CSS-ning kichik bir qismidan foydalanamiz, ular https://csstriggers.com/ kabi ba'zi bir ishlash ko'rsatmalariga amal qiladi. O'zboshimchalik bilan CSS-ni sahifaga joylashtirish Flutterning oldindan aytib bo'lmaydigan harakatlariga olib kelishi mumkin.

Veb-ilovalar uchun Flutter-da CSS-ni oldini olishning yana bir sababi shundaki, dizayni bo'yicha Flutter freymni yaratishda uning barcha xususiyatlarini bilishi kerak. CSS qora quti vazifasini bajaradi. Masalan, agar siz aylantiriladigan vidjetlarning ro'yxatini ko'rsatmoqchi bo'lsangiz, ularning hammasi uchun HTML-ni yaratishingiz va CSS-ning kerakli xususiyatlarini qo'llashingiz kerak (masalan, egiluvchan yo'nalishli satr va toshib ketish: o'tish). Keyin brauzer hamma narsani chiqaradi va uni ekranga chiqaradi. Ilova kodi joylashtirish jarayonida qatnashmaydi.

Va nihoyat, Flutter kodini platformada ko'chma saqlash ruhida CSS-dan qochamiz, shuning uchun xuddi shu kodni mahalliy Android va iOS-da ishlatishimiz mumkin.

Flutter-ni mavjud veb-ilovalarga joylashtiring

Biz bu uchun hali kerakli yordamni qo'shmadik, ammo kelajakda buni o'rganishni rejalashtirmoqdamiz. Biz ko'rib chiqayotgan bir nechta yondashuvlar