हाल ही में, मैंने फ़्लटर की खोज की - क्रॉस-प्लेटफ़ॉर्म मोबाइल एप्लिकेशन विकसित करने के लिए Google की एक नई रूपरेखा - और यहां तक ​​कि फ़्लटर की मूल बातें उस व्यक्ति को दिखाने का अवसर था, जिसने पहले कभी भी प्रोग्राम नहीं किया था। स्पंदन स्वयं डार्ट में लिखा गया था - क्रोम ब्राउज़र में पैदा हुई भाषा और कंसोल वर्ल्ड में भाग गया - और इससे मुझे लगता है कि "हम्म, लेकिन फ़्लटर गो में बहुत अच्छी तरह से लिखा जा सकता है!"।

क्यों नहीं? गो और डार्ट दोनों को Google द्वारा बनाया गया था, दोनों टाइप की गई संकलित भाषाएं - कुछ घटनाओं को थोड़ा अलग तरीके से घुमाएं, गो स्पटर के रूप में इतने बड़े पैमाने पर परियोजना को लागू करने के लिए एक उत्कृष्ट उम्मीदवार होगा। कोई कहेगा - गो में कोई कक्षाएं, जेनरिक और अपवाद नहीं हैं, इसलिए यह फिट नहीं है।

तो चलिए बहाना बनाते हैं कि Flutter पहले से ही गो में लिखा है। कोड कैसे दिखेगा और सामान्य तौर पर, यह काम करेगा?

डार्ट में क्या गलत है?

मैं ब्राउज़रों में जावास्क्रिप्ट के विकल्प के रूप में अपनी स्थापना के बाद से इस भाषा का अनुसरण कर रहा हूं। डार्ट को क्रोम ब्राउज़र में कुछ समय के लिए बनाया गया था और आशा थी कि यह जेएस को दबा देगा। मार्च 2015 में यह पढ़कर बहुत दुख हुआ कि डार्ट का समर्थन क्रोम से हटा दिया गया था ।

डार्ट ही महान है! खैर, मूल रूप से, जावास्क्रिप्ट के बाद, कोई भी भाषा महान है, लेकिन बाद में, कहें, गो, डार्ट इतना सुंदर नहीं है। लेकिन काफी ठीक है। इसमें सभी बोधगम्य और बोधगम्य विशेषताएं हैं - कक्षाएं, जेनेरिक, अपवाद, वायदा, एस्किंट-वेट, ईवेंट लूप, जेआईटी / एओटी, कचरा कलेक्टर, फ़ंक्शन अधिभार - प्रोग्रामिंग भाषाओं के सिद्धांत से किसी भी ज्ञात विशेषता का नाम और डार्ट में यह एक उच्च अनुपात के साथ होगा। संभावना। डार्ट में लगभग किसी भी चिप के लिए एक विशेष सिंटैक्स होता है - गेटर्स / सेटर के लिए एक विशेष सिंटैक्स, संक्षिप्त निर्माणकर्ताओं के लिए एक विशेष सिंटैक्स, एक विशेष सिंटैक्स के लिए एक सिंटैक्स और बहुत कुछ।

यह डार्ट को पहली नज़र में उन लोगों से परिचित कराता है जो पहले से ही किसी भी प्रोग्रामिंग भाषा में प्रोग्राम कर चुके हैं और यह बहुत अच्छा है। लेकिन विशेष सुविधाओं की इस प्रचुरता को एक सरल "हैलो, दुनिया" उदाहरण में समझाने की कोशिश कर रहा है, मैंने पाया कि इसके विपरीत, यह मास्टर करना मुश्किल बनाता है।

• भाषा की सभी "विशेष" विशेषताएं भ्रामक थीं - "एक विशेष विधि जिसे निर्माता कहा जाता है", "स्वत: आरंभ के लिए विशेष वाक्यविन्यास", "नामित मापदंडों के लिए विशेष वाक्यविन्यास", आदि।
• सब कुछ "छिपा हुआ" भ्रामक था - "यह फ़ंक्शन किस आयात से है? यह छिपा हुआ है, कोड को देखकर आप यह पता नहीं लगा सकते हैं", "इस वर्ग में एक निर्माता क्यों है, लेकिन इस वर्ग में नहीं है? यह वहां है, लेकिन यह छिपा हुआ है" और इसी तरह से
• सब कुछ "अस्पष्ट" उलझन में - "इसलिए यहां फ़ंक्शन के मापदंडों को बनाने के लिए या बिना नाम के?", "इसे कांस्ट या फाइनल करना चाहिए?", "यहां सामान्य फ़ंक्शन सिंटैक्स का उपयोग करें या" तीर के साथ छोटा "", आदि।

सिद्धांत रूप में, यह त्रिमूर्ति - "विशेष", "छिपी हुई" और "अस्पष्ट" - बुरा नहीं है जो लोग प्रोग्रामिंग भाषाओं में "जादू" कहते हैं उसका सार कैप्चर करता है। ये कोड के लेखन को आसान बनाने के लिए बनाई गई विशेषताएं हैं, लेकिन वास्तव में इसके पढ़ने और समझने में कठिनाई होती हैं।

और यह वास्तव में वह क्षेत्र है जहाँ गो अन्य भाषाओं से मौलिक रूप से अलग स्थिति लेता है, और रक्षा का जमकर इस्तेमाल करता है। गो लगभग बिना किसी जादू के एक भाषा है - इसमें "छिपी", "विशेष" और "अस्पष्ट" की मात्रा कम से कम है। लेकिन गो में इसकी कमियां हैं।

गो के साथ क्या गलत है?

चूँकि हम Flutter के बारे में बात कर रहे हैं, जो कि UI फ्रेमवर्क है, आइए Go को UI के साथ वर्णन करने और काम करने के लिए एक उपकरण के रूप में मानते हैं। सामान्य तौर पर, यूआई फ्रेमवर्क एक जबरदस्त चुनौती है और लगभग हमेशा विशेष समाधान की आवश्यकता होती है। यूआई में सबसे लगातार दृष्टिकोणों में से एक डीएसएल का निर्माण है - डोमेन-विशिष्ट भाषाओं - यूआई की जरूरतों के लिए विशेष रूप से सिलवाया पुस्तकालयों या फ्रेमवर्क के रूप में लागू किया गया। और सबसे अधिक बार आप यह राय सुन सकते हैं कि गो वास्तव में डीएसएल के लिए एक खराब भाषा है।

संक्षेप में, डीएसएल का अर्थ है एक नई भाषा - नियम और क्रिया - जो कि डेवलपर संचालित कर सकता है। इस पर कोड स्पष्ट रूप से चित्रमय इंटरफेस और उसके घटकों की मुख्य विशेषताओं का वर्णन करना चाहिए, डिजाइनर की कल्पना को पूरी तरह से मुक्त करने के लिए पर्याप्त लचीला होना चाहिए, और साथ ही कुछ नियमों के अनुसार इसे प्रतिबंधित करने के लिए पर्याप्त कठोर होना चाहिए। उदाहरण के लिए, आपको बटन को कुछ कंटेनर में रखने में सक्षम होना चाहिए, और इस बटन में आइकन को सही जगह पर रखना चाहिए, लेकिन यदि आप बटन को बटन में डालने की कोशिश करते हैं, तो कंपाइलर को एक त्रुटि वापस करनी चाहिए।

साथ ही, यूआई का वर्णन करने के लिए भाषाएं अक्सर घोषणात्मक होती हैं - "मुझे जो देखना चाहते हैं" के रूप में इंटरफ़ेस का वर्णन करने का अवसर दे रही है, और रूपरेखा को खुद समझें कि किस कोड से और इसे कैसे चलाना है।

कुछ भाषाओं को मूल रूप से दृष्टि में ऐसे कार्यों के साथ विकसित किया गया था, लेकिन गो नहीं। ऐसा लगता है कि फ्लटर ऑन गो लिखना एक और काम होगा!

ओड़ा फड़फड़ाहट

यदि आप स्पंदन से परिचित नहीं हैं, तो मैं दृढ़ता से अगले सप्ताहांत को शैक्षिक वीडियो देखने या ट्यूटोरियल पढ़ने की सलाह देता हूं, जिनमें से कई हैं। क्योंकि स्पंदन, एक शक के बिना, मोबाइल अनुप्रयोगों के विकास में खेल के नियमों को उलट देता है। और, काफी संभावना है, न केवल मोबाइल - पहले से ही रेंडरर्स (फ़्लटर के संदर्भ में, एम्बेडर्स) हैं, जो फ़्लटर एप्लिकेशन को देशी डेक्स्टॉप एप्लिकेशन और वेब एप्लिकेशन के रूप में लॉन्च करने के लिए हैं।

यह सीखना आसान है, यह तार्किक है, यह सामग्री डिजाइन (और न केवल) पर सुंदर विगेट्स की एक विशाल लाइब्रेरी के साथ आता है, इसमें एक महान और बड़ा समुदाय और उत्कृष्ट ट्यूनिंग है (यदि आपको go build/run/test साथ काम करने में आसानी पसंद है, तो फ़्लटर में। आपको एक समान अनुभव मिलेगा)।

एक साल पहले, मुझे एक छोटा मोबाइल एप्लिकेशन (आईओएस और एंड्रॉइड के लिए) लिखना आवश्यक था, और मुझे एहसास हुआ कि दोनों प्लेटफार्मों के लिए एक उच्च-गुणवत्ता वाले एप्लिकेशन को विकसित करने की जटिलता बहुत महान है (आवेदन मुख्य कार्य नहीं था) - मुझे इसके लिए पैसा आउटसोर्स करना और भुगतान करना था। वास्तव में, लगभग 20 वर्षों के प्रोग्रामिंग अनुभव वाले व्यक्ति के लिए एक सरल, लेकिन उच्च-गुणवत्ता वाला लेखन और सभी उपकरणों के अनुप्रयोग पर काम करना एक असंभव कार्य था। और यह मेरे लिए हमेशा बकवास रहा है।

फ्लटर के साथ, मैंने 3 बजे दोपहर में इस एप्लिकेशन को फिर से लिखा, जबकि स्क्रैच से फ्रेमवर्क सीखना। अगर किसी ने मुझसे कहा कि यह थोड़ा पहले हो सकता है, तो मुझे विश्वास नहीं होगा।

पिछली बार जब मैंने गो की खोज की थी, तब 5 साल पहले नई तकनीक की खोज के साथ उत्पादकता में समान वृद्धि देखी गई थी। उस पल ने मेरी जिंदगी बदल दी।

इसलिए मैं फ़्लटर सीखने शुरू करने की सलाह देता हूं और यह ट्यूटोरियल बहुत अच्छा है ।

स्पंदन पर "हैलो, वर्ल्ड"

जब आप flutter create माध्यम से एक नया अनुप्रयोग flutter create , तो आपको केवल शीर्षक, पाठ, काउंटर और एक बटन के साथ ऐसा प्रोग्राम मिलेगा जो काउंटर को बढ़ाता है।

मुझे लगता है कि यह एक महान उदाहरण है। गो पर हमारे काल्पनिक स्पंदन पर इसे लिखने के लिए। इसमें फ्रेमवर्क की लगभग सभी मूल अवधारणाएं हैं, जिस पर आप विचार का परीक्षण कर सकते हैं। आइए कोड देखें (यह एक फ़ाइल है):

 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), ); } } 

आइए भागों में कोड का विश्लेषण करें, विश्लेषण करें कि यह गो पर क्या और कैसे फिट बैठता है, और हमारे पास विभिन्न विकल्पों पर एक नज़र डालें।

हम गो पर कोड का अनुवाद करते हैं

शुरुआत सरल और सीधी होगी - निर्भरता को आयात करें और main() फ़ंक्शन लॉन्च करें। यहां कुछ भी जटिल या दिलचस्प नहीं है, परिवर्तन लगभग वाक्यगत है:

 package hello import "github.com/flutter/flutter" func main() { app := NewApp() flutter.Run(app) } 

अंतर केवल इतना है कि MyApp() लॉन्च करने के बजाय MyApp() - एक फ़ंक्शन जो कि एक कंस्ट्रक्टर है, जो कि एक विशेष फ़ंक्शन है जो कि MyApp नामक एक वर्ग के अंदर छिपा हुआ है - हम बस सामान्य रूप से स्पष्ट और छिपे हुए फ़ंक्शन को NewApp() । वह एक ही काम करता है, लेकिन यह स्पष्ट करने और समझने के लिए बहुत स्पष्ट है कि यह क्या है, यह कैसे शुरू होता है और यह कैसे काम करता है।

विजेट कक्षाएं

स्पंदन में, सब कुछ विगेट्स शामिल हैं। स्पंदन के डार्ट संस्करण में, प्रत्येक विजेट को एक वर्ग के रूप में कार्यान्वित किया जाता है जो स्पंदन के विजेट के लिए विशेष कक्षाएं विरासत में मिलता है।

गो में कोई वर्ग नहीं हैं, और इसलिए कोई वर्ग पदानुक्रम नहीं है, क्योंकि दुनिया ऑब्जेक्ट-ओरिएंटेड नहीं है, और यहां तक ​​कि कम पदानुक्रम भी नहीं है। केवल कक्षा-उन्मुख ओओपी मॉडल से परिचित प्रोग्रामर के लिए, यह एक रहस्योद्घाटन हो सकता है, लेकिन यह वास्तव में नहीं है। दुनिया अवधारणाओं, प्रक्रियाओं और अंतःक्रियाओं का एक विशाल अंतर-ग्राफ है। यह पूरी तरह से संरचित नहीं है, लेकिन यह भी अराजक नहीं है, और इसे श्रेणी पदानुक्रम में निचोड़ने की कोशिश करना कोड आधार को अपठनीय और अनाड़ी बनाने का सबसे विश्वसनीय तरीका है - वास्तव में अब के लिए सबसे अधिक कोड आधार हैं।

मैं वास्तव में गो की सराहना करता हूं क्योंकि इसके रचनाकारों ने कक्षाओं की इस सर्वव्यापी अवधारणा को पुनर्जीवित करने के लिए परेशानी उठाई और गो में एक बहुत सरल और अधिक शक्तिशाली ओओपी अवधारणा को लागू किया, जो संयोग से नहीं, ओओपी के निर्माता, एलन के, के करीब निकला, मन में था ।

गो में हम एक विशिष्ट प्रकार - संरचना के रूप में किसी भी अमूर्तता का प्रतिनिधित्व करते हैं:

 type MyApp struct { // ... } 

स्पंदन के डार्ट संस्करण में, MyApp को StatelessWidget विरासत में प्राप्त करना चाहिए और build विधि को ओवरराइड करना चाहिए। यह दो समस्याओं को हल करने के लिए आवश्यक है:

1. हमारे विजेट ( MyApp ) कुछ विशेष गुण / तरीके दें
2. फ़्लर्ट को बिल्ड / रेंडर प्रक्रिया में हमारे कोड को कॉल करने में सक्षम करें

मुझे फ़्लटर के इंटर्नल के बारे में नहीं पता है, तो हम कहते हैं कि आइटम नंबर 1 प्रश्न में नहीं है, और हमें इसे करना होगा। गो के पास इसके लिए एक अनूठा और स्पष्ट समाधान है: एम्बेडिंग प्रकार:

 type MyApp struct { flutter.Core // ... } 

यह कोड हमारे flutter.Core गुणों और विधियों को हमारे MyApp प्रकार में जोड़ देगा। मैंने इसे Widget बजाय Core कहा, क्योंकि, सबसे पहले, टाइप एम्बेडिंग हमारे MyApp अभी तक MyApp विजेट नहीं बनाती है, और दूसरी बात, यह नाम गोफरजेएस वेक्टी फ्रेमवर्क में बहुत अच्छी तरह से उपयोग किया जाता है (केवल प्रतिक्रिया के लिए कुछ ऐसा ही, गो)। मैं थोड़ी देर बाद वेक्टी और फ्लटर के बीच समानता के विषय पर बात करूंगा।

दूसरा बिंदु - build() पद्धति build() कार्यान्वयन, जो फ़्लटर इंजन का उपयोग करने में सक्षम होगा - गो में भी बस और स्पष्ट रूप से हल किया जाता है। हमें केवल एक विशिष्ट हस्ताक्षर के साथ एक विधि जोड़ने की आवश्यकता है जो गो पर हमारे काल्पनिक स्पंदन पुस्तकालय में कहीं परिभाषित एक निश्चित इंटरफ़ेस को संतुष्ट करता है:

flutter.go:

 type Widget interface { Build(ctx BuildContext) Widget } 

और अब हमारा main.go:

 type MyApp struct { flutter.Core // ... } // Build renders the MyApp widget. Implements Widget interface. func (m *MyApp) Build(ctx flutter.BuildContext) flutter.Widget { return flutter.MaterialApp() } 

हम यहां कुछ अंतर देख सकते हैं:

• कोड कुछ और अधिक BuildContext - BuildContext , Widget और MaterialApp उनके सामने आयात को flutter करने के लिए इंगित करता है।
• कोड थोड़ा कम निराधार है - इसमें कोई शब्द नहीं हैं जैसे कि extends Widget या @override
• Build() विधि एक बड़े अक्षर से शुरू होती है, क्योंकि इसका अर्थ है गो में विधि का "प्रचार"। डार्ट में, प्रचार इस बात से निर्धारित होता है कि नाम अंडरस्कोर (_) से शुरू होता है या नहीं।

तो, हमारे flutter.Core पर Go में एक विजेट बनाने के लिए, हमें flutter.Core टाइप करना होगा और flutter.Widget लागू करना flutter.Widget । flutter.Widget इंटरफ़ेस। हमने इसका पता लगाया, आगे खुदाई की।

राज्य

यह उन चीजों में से एक थी, जिसने मुझे स्पंदन में उलझा दिया। दो अलग-अलग वर्ग हैं - StatelessWidget और StatefulWidget । मेरे लिए, एक "स्टेटलेस विजेट" एक ही विजेट है, बस बिना, हम्म, डेटा, राज्य - एक नए वर्ग के साथ क्यों आते हैं? लेकिन ठीक है, मैं इसके साथ रह सकता हूं।

लेकिन आगे - और, आप केवल एक अन्य वर्ग ( StatefulWidget ) प्राप्त नहीं कर सकते हैं, लेकिन आपको ऐसा जादू लिखना होगा (आईडीई आपके लिए यह करेगा, लेकिन बिंदु नहीं):

 class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold() } } 

हम्म, देखते हैं कि यहां क्या होता है।

मूल रूप से, कार्य यह है: विजेट में एक राज्य जोड़ें - एक काउंटर, हमारे मामले में - और फ़्लटर इंजन को बताएं कि जब हमने विजेट को फिर से बनाने के लिए राज्य को बदल दिया। यह समस्या की वास्तविक जटिलता है (ब्रूक्स शब्दों में आवश्यक जटिलता)।

बाकी सब कुछ आकस्मिक जटिलता है। डार्ट पर स्पंदन एक नए State वर्ग के साथ आता है जो जेनरिक का उपयोग करता है और एक विजेट को एक प्रकार के पैरामीटर के रूप में लेता है। अगला, _MyHomePageState वर्ग _MyHomePageState , जो State MyApp की State MyApp ... ठीक है, आप अभी भी इसे किसी भी तरह से पचा सकते हैं। लेकिन राज्य वर्ग द्वारा build() पद्धति क्यों है, न कि वह वर्ग जो विजेट है? ब्रर्र…।

इस प्रश्न का उत्तर स्पंदन एफएक्यू में है और लघु उत्तर को यहां पर्याप्त विवरण में माना जाता है - StatefulWidget विरासत में प्राप्त करते समय बग की एक निश्चित श्रेणी से बचने के लिए। दूसरे शब्दों में, यह क्लास-ओरिएंटेड OOP डिज़ाइन की समस्या को हल करने के लिए एक समाधान है। शिक।

हम गो में यह कैसे करेंगे?

सबसे पहले, मैं व्यक्तिगत रूप से "राज्य" के लिए एक अलग इकाई नहीं बनाना पसंद करूंगा - State । आखिरकार, हमारे पास पहले से ही प्रत्येक विशेष प्रकार में एक राज्य है - ये संरचना के क्षेत्र हैं। भाषा ने पहले ही हमें यह सार दिया है, इसलिए बोलने के लिए। एक और समान इकाई बनाना केवल प्रोग्रामर को भ्रमित करेगा।

जाहिर है, चुनौती यह है कि स्पंदन को राज्य परिवर्तनों का जवाब देने की क्षमता है (यह प्रतिक्रियाशील प्रोग्रामिंग का सार है, सब के बाद)। और अगर हम डेवलपर को एक विशेष फ़ंक्शन ( setState() ) का उपयोग करने के लिए कह सकते हैं, तो हम इंजन को फिर से तैयार करने के लिए और कब नहीं करने के लिए एक विशेष फ़ंक्शन का उपयोग करने के लिए कह सकते हैं। अंत में, सभी राजकीय परिवर्तनों को पुन: व्यवस्थित करने की आवश्यकता नहीं होती है, और यहाँ हमारे पास और भी अधिक नियंत्रण होगा:

 type MyHomePage struct { flutter.Core counter int } // Build renders the MyHomePage widget. Implements Widget interface. func (m *MyHomePage) Build(ctx flutter.BuildContext) flutter.Widget { return flutter.Scaffold() } // incrementCounter increments widgets's counter by one. func (m *MyHomePage) incrementCounter() { m.counter++ flutter.Rerender(m) // or m.Rerender() // or m.NeedsUpdate() } 

आप अलग-अलग नामकरण विकल्पों के साथ खेल सकते हैं - मुझे इसकी प्रत्यक्षता और इस तथ्य के लिए NeedsUpdate() पसंद है कि यह एक विजेट प्रॉपर्टी है ( flutter.Core से प्राप्त), लेकिन वैश्विक flutter.Rerender() विधि भी अच्छी लगती है। यह सच है, यह गलत अर्थ देता है कि विजेट तुरंत तुरंत फिर से शुरू हो जाएगा, लेकिन ऐसा नहीं है - यह अगले फ्रेम अपडेट पर फिर से शुरू होगा, और विधि कॉल आवृत्ति रेंडरिंग आवृत्ति की तुलना में बहुत अधिक हो सकती है - लेकिन हमारा फ़्लटर इंजन पहले से ही इससे निपटने में सक्षम होना चाहिए।

लेकिन विचार यह है कि हमने सिर्फ समस्या को बिना जोड़े हल किया है:

• नए प्रकार
• जेनरिक
• पढ़ने / लिखने के लिए विशेष नियम
• विशेष नई ओवरराइड विधियाँ

इसके अलावा, एपीआई बहुत स्पष्ट और अधिक समझ में आता है - बस काउंटर बढ़ाएं (जैसा कि आप किसी अन्य कार्यक्रम में करेंगे) और फ़्लटर को विजेट को फिर से बनाने के लिए कहें। यह सिर्फ कुछ है जो बहुत स्पष्ट नहीं है अगर हम सिर्फ setState कहते हैं - जो कि राज्य की स्थापना के लिए सिर्फ एक विशेष कार्य नहीं है, यह एक ऐसा फ़ंक्शन है जो एक फ़ंक्शन (wtf?) देता है जिसमें हम पहले से ही राज्य के साथ कुछ कर रहे हैं। फिर से, भाषाओं और रूपरेखाओं में छिपे हुए जादू को कोड को समझना और पढ़ना बहुत मुश्किल हो जाता है।

हमारे मामले में, हमने उसी समस्या को हल किया, कोड सरल और दो बार छोटा है।

अन्य विजेट्स में स्टेट विजेट्स

विषय की तार्किक निरंतरता के रूप में, आइए एक नज़र डालते हैं कि फ़्लटर में किसी अन्य विजेट में "स्टेट विजेट" का उपयोग कैसे किया जाता है:

 @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: MyHomePage(title: 'Flutter Demo Home Page'), ); } 

MyHomePage यहां एक "राज्य विजेट" (इसमें एक काउंटर है), और हम इसे निर्माण के दौरान MyHomePage() कॉल करके बनाते हैं ... रुको, क्या?

build() को विजेट को फिर से शुरू करने के लिए कहा जाता है, संभवतः प्रति सेकंड कई बार। रेंडरिंग के दौरान हमें हर बार, विशेष रूप से एक राज्य के साथ एक विजेट क्यों बनाना चाहिए? इसका कोई मतलब नहीं है।

यह पता चला है कि स्पंदन प्रोग्रामर से इस इनिशियलाइज़ेशन / स्टेट मैनेजमेंट को छिपाने के लिए Widget और State बीच इस अलगाव का उपयोग करता है (अधिक छिपी हुई चीजें, अधिक!)। यह हर बार एक नया विजेट बनाता है, लेकिन राज्य, अगर यह पहले से ही बनाया गया है, तो स्वचालित रूप से पाया जाता है और विजेट से जुड़ा होता है। यह जादू अदृश्य रूप से होता है और मुझे नहीं पता कि यह कैसे काम करता है - आपको कोड पढ़ने की आवश्यकता है।

मैं प्रोग्रामर से जितना संभव हो सके इसे छिपाने और छिपाने के लिए प्रोग्रामिंग में एक वास्तविक बुराई मानता हूं, इसे एर्गोनॉमिक्स के साथ उचित ठहराया। मुझे यकीन है कि औसत सांख्यिकीय प्रोग्रामर यह जादू कैसे काम करता है यह समझने के लिए फ्लटर कोड नहीं पढ़ेगा, और यह समझने की संभावना नहीं है कि कैसे और क्या परस्पर जुड़ा हुआ है।

गो संस्करण के लिए, मैं निश्चित रूप से इस तरह के छिपे हुए जादू टोना नहीं चाहूंगा, और एक स्पष्ट और दृश्य आरंभीकरण पसंद करूंगा, भले ही इसका मतलब थोड़ा अधिक निराधार कोड हो। डार्ट के लिए फ़्लटर के दृष्टिकोण को भी लागू किया जा सकता है, लेकिन मुझे जादू को कम करने के लिए गो से प्यार है, और मैं फ्रेमवर्क में एक ही दर्शन देखना चाहूंगा। इसलिए, मैं इस तरह से विजेट ट्री में राज्य के साथ विगेट्स के लिए अपना कोड लिखूंगा:

 // MyApp is our top application widget. type MyApp struct { flutter.Core homePage *MyHomePage } // NewMyApp instantiates a new MyApp widget func NewMyApp() *MyApp { app := &MyApp{} app.homePage = &MyHomePage{} return app } // Build renders the MyApp widget. Implements Widget interface. func (m *MyApp) Build(ctx flutter.BuildContext) flutter.Widget { return m.homePage } // MyHomePage is a home page widget. type MyHomePage struct { flutter.Core counter int } // Build renders the MyHomePage widget. Implements Widget interface. func (m *MyHomePage) Build(ctx flutter.BuildContext) flutter.Widget { return flutter.Scaffold() } // incrementCounter increments app's counter by one. func (m *MyHomePage) incrementCounter() { m.counter++ flutter.Rerender(m) } 

यह कोड डार्ट संस्करण को खो देता है, अगर मैं विजेट ट्री से homePage हटाना चाहता हूं और इसे किसी और चीज़ से बदलना है, तो मुझे इसे एक के बजाय तीन स्थानों पर निकालना होगा। लेकिन बदले में हमें पूरी जानकारी मिलती है कि क्या, कहाँ और कैसे होता है, जहाँ मेमोरी आवंटित की जाती है, किसे कॉल किया जाता है, और इसी तरह - आपके हाथ की हथेली में कोड स्पष्ट और पढ़ने में आसान है।

वैसे, फ़्लटर में स्टेटफुलबर्ल के रूप में भी एक ऐसी चीज़ है, जो और भी अधिक जादू जोड़ता है और आपको मक्खी पर राज्य के साथ विजेट बनाने की अनुमति देता है।

डीएसएल

अब चलिए मज़ेदार हिस्से पर लेते हैं। हम Go पर विजेट ट्री का प्रतिनिधित्व कैसे करेंगे? हम चाहते हैं कि यह संक्षिप्त, साफ-सुथरा, रिफलेक्टर और बदलाव को आसान बनाने के लिए, विजेट्स के बीच स्थानिक रिश्तों का वर्णन करें (विगेट्स जो नेत्रहीन हैं, पास होना चाहिए और विवरण में होना चाहिए), और एक ही समय में लचीला होना चाहिए ताकि मनमाना वर्णन किया जा सके घटना संचालकों की तरह कोड।

यह मुझे लगता है कि डार्ट पर विकल्प काफी सुंदर और शानदार है:

 return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('You have pushed the button this many times:'), Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), ); 

प्रत्येक विजेट में एक रचनाकार होता है जो वैकल्पिक मापदंडों को स्वीकार करता है, और जो रिकॉर्ड को वास्तव में अच्छा बनाता है, वह फ़ंक्शन के नामित पैरामीटर हैं ।

जिसका नाम पैरामीटर्स रखा गया है

यदि आप इस शब्द से परिचित नहीं हैं, तो कई भाषाओं में फ़ंक्शन के मापदंडों को "स्थिति" कहा जाता है, क्योंकि उनकी स्थिति फ़ंक्शन के लिए मायने रखती है:

 Foo(arg1, arg2, arg3) 

, और नामित मापदंडों के मामले में, सब कुछ कॉल में उनके नाम से तय होता है:

 Foo(name: arg1, description: arg2, size: arg3) 

यह पाठ जोड़ता है, लेकिन यह समझने के प्रयास में कोड के चारों ओर क्लिक और चाल बचाता है, कि पैरामीटर का क्या मतलब है।

विजेट ट्री के मामले में, वे पठनीयता में एक महत्वपूर्ण भूमिका निभाते हैं। ऊपर के समान कोड की तुलना करें, लेकिन नामित मापदंडों के बिना:

 return Scaffold( AppBar( Text(widget.title), ), Center( Column( MainAxisAlignment.center, <Widget>[ Text('You have pushed the button this many times:'), Text( '$_counter', Theme.of(context).textTheme.display1, ), ], ), ), FloatingActionButton( _incrementCounter, 'Increment', Icon(Icons.add), ), ); 

ऐसा नहीं है। है ना? यह समझना न केवल अधिक कठिन है (आपको यह ध्यान में रखने की आवश्यकता है कि प्रत्येक पैरामीटर का मतलब क्या है और इसका प्रकार क्या है, और यह एक महत्वपूर्ण संज्ञानात्मक भार है), लेकिन यह भी हमें चुनने में स्वतंत्रता नहीं देता है कि हम किन मापदंडों को स्थानांतरित करना चाहते हैं। उदाहरण के लिए, आप अपने सामग्री अनुप्रयोग के लिए FloatingActionButton नहीं चाह सकते हैं, इसलिए आप इसे केवल मापदंडों में निर्दिष्ट नहीं करते हैं। नामित मापदंडों के बिना, हमें या तो सभी संभावित विगेट्स को निर्दिष्ट करने के लिए मजबूर करना होगा, या प्रतिबिंब के साथ जादू का सहारा लेना होगा ताकि यह पता लगाया जा सके कि किस विजेट को स्थानांतरित किया गया था।

और चूंकि गो में कार्यों और नामित मापदंडों का कोई अधिभार नहीं है, इसलिए यह गो के लिए एक आसान काम नहीं होगा।

जाओ विजेट पेड़

संस्करण 1

आइए स्कैफोल्ड ऑब्जेक्ट पर करीब से नज़र डालें, जो कि मोबाइल एप्लिकेशन के लिए एक सुविधाजनक आवरण है। इसके कई गुण हैं - appBar, drawe, home, bottomNavigationBar, floActionBar - और ये सभी विजेट हैं। विजेट ट्री बनाते समय, हमें वास्तव में किसी न किसी तरह से इस ऑब्जेक्ट को इनिशियलाइज़ करना होगा, इसे उपरोक्त विजेट प्रॉपर्टीज़ के रूप में पास करना होगा। खैर, यह सामान्य निर्माण और वस्तुओं के प्रारंभिककरण से बहुत अलग नहीं है।

चलो माथे दृष्टिकोण की कोशिश करते हैं:

 return flutter.NewScaffold( flutter.NewAppBar( flutter.Text("Flutter Go app", nil), ), nil, nil, flutter.NewCenter( flutter.NewColumn( flutter.MainAxisCenterAlignment, nil, []flutter.Widget{ flutter.Text("You have pushed the button this many times:", nil), flutter.Text(fmt.Sprintf("%d", m.counter), ctx.Theme.textTheme.display1), }, ), ), flutter.FloatingActionButton( flutter.NewIcon(icons.Add), "Increment", m.onPressed, nil, nil, ), ) 

सबसे सुंदर यूआई कोड नहीं, निश्चित रूप से। flutter शब्द हर जगह है और पूछता है। इसे छिपाने के लिए (वास्तव में, मुझे पैकेज material का नाम देना था, flutter नहीं, लेकिन सार नहीं), अनाम पैरामीटर पूरी तरह से स्पष्ट नहीं हैं, और ये nil एस हर जगह खुले तौर पर भ्रमित कर रहे हैं।

संस्करण 2

चूंकि, फिर भी, अधिकांश कोड flutter पैकेज से एक या दूसरे प्रकार / फ़ंक्शन का उपयोग करेंगे, हम पैकेज को अपने नाम स्थान में आयात करने के लिए "डॉट आयात" प्रारूप का उपयोग कर सकते हैं और इस तरह पैकेज नाम को "छिपाएं":

 import . "github.com/flutter/flutter" 

अब flutter.Text की flutter.Text हम सिर्फ Text लिख सकते हैं। यह आमतौर पर बुरा अभ्यास है, लेकिन हम रूपरेखा के साथ काम करते हैं, और यह आयात हर पंक्ति में सचमुच होगा। मेरे अभ्यास से, यह वास्तव में ऐसा मामला है जिसके लिए ऐसा आयात स्वीकार्य है - उदाहरण के लिए, जब गोकेनवे के परीक्षण के लिए अद्भुत रूपरेखा का उपयोग किया जाता है ।

आइए देखें कि कोड कैसा दिखेगा:

 return NewScaffold( NewAppBar( Text("Flutter Go app", nil), ), nil, nil, NewCenter( NewColumn( MainAxisCenterAlignment, nil, []Widget{ Text("You have pushed the button this many times:", nil), Text(fmt.Sprintf("%d", m.counter), ctx.Theme.textTheme.display1), }, ), ), FloatingActionButton( NewIcon(icons.Add), "Increment", m.onPressed, nil, nil, ), ) 

पहले से ही बेहतर है, लेकिन ये नील-एस और अनाम पैरामीटर ...।

संस्करण 3

आइए देखें कि यदि हम पैरामीटर्स का विश्लेषण करने के लिए प्रतिबिंब का उपयोग करते हैं (प्रोग्राम चलने के दौरान कोड का निरीक्षण करने की क्षमता) तो कोड कैसा दिखेगा। यह दृष्टिकोण गो ( मार्टिनी , उदाहरण के लिए) पर कई शुरुआती HTTP फ्रेमवर्क में उपयोग किया जाता है, और एक बहुत बुरा अभ्यास माना जाता है - यह असुरक्षित है, टाइप सिस्टम की सुविधा खो देता है, अपेक्षाकृत धीमा है और कोड में जादू जोड़ता है - लेकिन प्रयोग के लिए आप कोशिश कर सकते हैं:

 return NewScaffold( NewAppBar( Text("Flutter Go app"), ), NewCenter( NewColumn( MainAxisCenterAlignment, []Widget{ Text("You have pushed the button this many times:"), Text(fmt.Sprintf("%d", m.counter), ctx.Theme.textTheme.display1), }, ), ), FloatingActionButton( NewIcon(icons.Add), "Increment", m.onPressed, ), ) 

बुरा नहीं है, और यह डार्ट से मूल संस्करण जैसा दिखता है, लेकिन नामित मापदंडों की कमी वास्तव में आंख को नुकसान पहुंचाती है।

संस्करण 4

आइए थोड़ा पीछे हटें और खुद से पूछें कि हम क्या करने की कोशिश कर रहे हैं। हमें डार्ट दृष्टिकोण को नेत्रहीन रूप से कॉपी नहीं करना है (हालांकि यह एक अच्छा बोनस होगा - ऐसे लोगों को पढ़ाने के लिए कम है जो पहले से ही फ़्लर्ट ऑन डार्ट से परिचित हैं)। वास्तव में, हम सिर्फ नई वस्तुएं बनाते हैं और उन्हें गुण प्रदान करते हैं।

इस तरह से कोशिश कर सकते हैं?

 scaffold := NewScaffold() scaffold.AppBar = NewAppBar(Text("Flutter Go app")) column := NewColumn() column.MainAxisAlignment = MainAxisCenterAlignment counterText := Text(fmt.Sprintf("%d", m.counter)) counterText.Style = ctx.Theme.textTheme.display1 column.Children = []Widget{ Text("You have pushed the button this many times:"), counterText, } center := NewCenter() center.Child = column scaffold.Home = center icon := NewIcon(icons.Add), fab := NewFloatingActionButton() fab.Icon = icon fab.Text = "Increment" fab.Handler = m.onPressed scaffold.FloatingActionButton = fab return scaffold 

, " ", . -, – , . -, , .

, UI GTK Qt . , , Qt 5:

  QGridLayout *layout = new QGridLayout(this); layout->addWidget(new QLabel(tr("Object name:")), 0, 0); layout->addWidget(m_objectName, 0, 1); layout->addWidget(new QLabel(tr("Location:")), 1, 0); m_location->setEditable(false); m_location->addItem(tr("Top")); m_location->addItem(tr("Left")); m_location->addItem(tr("Right")); m_location->addItem(tr("Bottom")); m_location->addItem(tr("Restore")); layout->addWidget(m_location, 1, 1); QDialogButtonBox *buttonBox = new QDialogButtonBox(QDialogButtonBox::Ok | QDialogButtonBox::Cancel, this); connect(buttonBox, &QDialogButtonBox::rejected, this, &QDialog::reject); connect(buttonBox, &QDialogButtonBox::accepted, this, &QDialog::accept); layout->addWidget(buttonBox, 2, 0, 1, 2); 

, - . , , , .

5

, – -. उदाहरण के लिए:

 func Build() Widget { return NewScaffold(ScaffoldParams{ AppBar: NewAppBar(AppBarParams{ Title: Text(TextParams{ Text: "My Home Page", }), }), Body: NewCenter(CenterParams{ Child: NewColumn(ColumnParams{ MainAxisAlignment: MainAxisAlignment.center, Children: []Widget{ Text(TextParams{ Text: "You have pushed the button this many times:", }), Text(TextParams{ Text: fmt.Sprintf("%d", m.counter), Style: ctx.textTheme.display1, }), }, }), }), FloatingActionButton: NewFloatingActionButton( FloatingActionButtonParams{ OnPressed: m.incrementCounter, Tooltip: "Increment", Child: NewIcon(IconParams{ Icon: Icons.add, }), }, ), }) } 

! , . ...Params , . , , Go , , .

-, ...Params , . (proposal) — " " . , FloatingActionButtonParameters{...} {...} . :

 func Build() Widget { return NewScaffold({ AppBar: NewAppBar({ Title: Text({ Text: "My Home Page", }), }), Body: NewCenter({ Child: NewColumn({ MainAxisAlignment: MainAxisAlignment.center, Children: []Widget{ Text({ Text: "You have pushed the button this many times:", }), Text({ Text: fmt.Sprintf("%d", m.counter), Style: ctx.textTheme.display1, }), }, }), }), FloatingActionButton: NewFloatingActionButton({ OnPressed: m.incrementCounter, Tooltip: "Increment", Child: NewIcon({ Icon: Icons.add, }), }, ), }) } 

Dart! .

6

, . , , , , .

, , , -, – :

 button := NewButton(). WithText("Click me"). WithStyle(MyButtonStyle1) 

या

 button := NewButton(). Text("Click me"). Style(MyButtonStyle1) 

Scaffold- :

 // Build renders the MyHomePage widget. Implements Widget interface. func (m *MyHomePage) Build(ctx flutter.BuildContext) flutter.Widget { return NewScaffold(). AppBar(NewAppBar(). Text("Flutter Go app")). Child(NewCenter(). Child(NewColumn(). MainAxisAlignment(MainAxisCenterAlignment). Children([]Widget{ Text("You have pushed the button this many times:"), Text(fmt.Sprintf("%d", m.counter)). Style(ctx.Theme.textTheme.display1), }))). FloatingActionButton(NewFloatingActionButton(). Icon(NewIcon(icons.Add)). Text("Increment"). Handler(m.onPressed)) } 

Go – , . Dart-, :

• ""

New...() – , . , — " , , , , , , – " .

, , 5- 6- .

"hello, world" Flutter Go:

main.go

 package hello import "github.com/flutter/flutter" func main() { flutter.Run(NewMyApp()) } 

app.go:

 package hello import . "github.com/flutter/flutter" // MyApp is our top application widget. type MyApp struct { Core homePage *MyHomePage } // NewMyApp instantiates a new MyApp widget func NewMyApp() *MyApp { app := &MyApp{} app.homePage = &MyHomePage{} return app } // Build renders the MyApp widget. Implements Widget interface. func (m *MyApp) Build(ctx BuildContext) Widget { return m.homePage } 

home_page.go:

 package hello import ( "fmt" . "github.com/flutter/flutter" ) // MyHomePage is a home page widget. type MyHomePage struct { Core counter int } // Build renders the MyHomePage widget. Implements Widget interface. func (m *MyHomePage) Build(ctx BuildContext) Widget { return NewScaffold(ScaffoldParams{ AppBar: NewAppBar(AppBarParams{ Title: Text(TextParams{ Text: "My Home Page", }), }), Body: NewCenter(CenterParams{ Child: NewColumn(ColumnParams{ MainAxisAlignment: MainAxisAlignment.center, Children: []Widget{ Text(TextParams{ Text: "You have pushed the button this many times:", }), Text(TextParams{ Text: fmt.Sprintf("%d", m.counter), Style: ctx.textTheme.display1, }), }, }), }), FloatingActionButton: NewFloatingActionButton( FloatingActionButtonParameters{ OnPressed: m.incrementCounter, Tooltip: "Increment", Child: NewIcon(IconParams{ Icon: Icons.add, }), }, ), }) } // incrementCounter increments app's counter by one. func (m *MyHomePage) incrementCounter() { m.counter++ flutter.Rerender(m) } 

!

निष्कर्ष

Vecty

, , Vecty . , , , , Vecty DOM/CSS/JS, Flutter , 120 . , Vecty , Flutter Go Vecty .

Flutter

– , . Flutter, .

Go

" Flutter Go?" "" , , , , , Flutter, , , "" . , Go .

, Go . . Go, , , -. – , , .

Go. – , .

Flutter

, Flutter , , . "/ " , Dart ( , , ). Dart, , (, ) DartVM V8, Flutter – Flutter -.

, . . , , 1.0 . , - .

game changer, Flutter , , .

UI – Flutter, .

संदर्भ

• https://flutter.io
• Flutter Tutorial for Beginners — Build iOS and Android Apps
• Go proposal: An Improved, Golang-Cohesive Design for Named Arguments
• Go proposal: spec: untyped composite literals