Online editor DartPad and dart2js tool

DartPad zero installation के साथ browser में Dart चलाता है (minus file access), और dart2js वह compiler है जो Dart को JavaScript में translate करता है ताकि browsers वह चला सकें जो वे natively कभी नहीं बोलते।

9 min read · 9 cards · 2 checks

Read in: English · हिन्दी · ગુજરાતી


Theory

Dart Install करने से पहले Dart लिखिए

नई language, और lab machines में कोई Dart SDK नहीं, कोई Flutter नहीं, और एक admin password के लिए queue।

बिल्कुल कोई obstacle नहीं: एक browser खोलिए, dartpad.dev visit कीजिए, और आप 10 seconds में Dart लिख और चला रहे हैं, किसी भी screen वाली चीज़ पर: lab PC, bus में आपका phone।

और उस convenience के अंदर छिपा है एक genuine puzzle जो marks लायक है: browsers सिर्फ़ JavaScript चलाते हैं: तो आपका Dart एक में कैसे चल रहा है? Answer इस lesson का दूसरा tool है।

Theory

DartPad, Formally

DartPad dartpad.dev पर Dart का free online editor है:

  • zero installation: editor, compiler और console सब page में रहते हैं
  • instant feedback: type कीजिए, Run press कीजिए, output console panel में आता है; errors type करते हुए underline होते हैं
  • shareable: snippets को URLs मिलते हैं: classmates experiments कैसे swap करते हैं
  • core libraries support करता है (और Flutter mode में Flutter samples)

इसकी honest limits: कोई dart:io नहीं (files पढ़ना या लिखना नहीं: एक browser page आपकी disk से sandboxed दूर है: वही law जो BCA405-01 के browser rules के पीछे थी) और कोई arbitrary packages नहीं। एक practice ground, build tool नहीं।

Practical

इसे dartpad.dev में Paste कीजिए और Run Press कीजिए

void main() {
  var events = ['Garba Night', 'Coding Contest', 'Robo Race'];
  int day = 2;

  print('TechnoUtsav, day $day');
  for (var e in events) {
    print('  $e');
  }
  // Console shows the header and 3 indented event names.
  // No install, no SDK, no admin password.
}

Theory

dart2js: Translator जो Browsers को चाहिए

Browsers natively exactly एक language execute करते हैं: JavaScript (BCA405-01 की पूरी दुनिया)। उनके पास कोई Dart engine नहीं है।

dart2js यह gap close करता है: एक compiler जो Dart source को optimised JavaScript में translate करता है:

dart compile js app.dart (modern CLI; classic tool का नाम dart2js है)

एक .js file निकलती है जो कोई भी browser चला सकता है: आपका Dart web app, browsers जिस अकेली currency को accept करते हैं उसमें delivered। Output lean है: dart2js analyse करता है आपका code असल में क्या इस्तेमाल करता है और बाकी drop करता है (dead-code elimination)।

और एक pleasing loop: DartPad खुद इस तरह काम करता है: आपका snippet पर्दे के पीछे JS में compile होता है, यही तरीका है Dart एक JS-only browser में "चलता" है।

Quiz

dart2js exist ही क्यों करता है?

  1. Dart programs को native Dart से fast चलाने के लिए
  2. क्योंकि browsers natively सिर्फ़ JavaScript execute करते हैं, तो web तक पहुँचने के लिए Dart को translate होना ज़रूरी है
  3. JavaScript projects को automatically Dart में convert करने के लिए
  4. क्योंकि DartPad इसके बिना loops नहीं चला सकता
Show the answer

क्योंकि browsers natively सिर्फ़ JavaScript execute करते हैं, तो web तक पहुँचने के लिए Dart को translate होना ज़रूरी है

Browser एक JavaScript-only runtime है: Chrome या Firefox के अंदर कोई Dart VM नहीं रहता: तो web तक Dart का रास्ता translation है, और dart2js translator है। यह BCA404 के Unit 1 (कई languages, एक MSIL) को inverted mirror करता है: एक language, जो भी target runtime बोलता है उसमें compiled: phones के लिए AOT, browsers के लिए JS। Option A direction और purpose ग़लत पढ़ता है: compiled JS का लक्ष्य hand-written JS match करना है, native Dart को beat करना नहीं। Option C arrow reverse करता है: कोई tool JS को वापस Dart में un-translate नहीं करता। Option D एक dependency invent करता है: DartPad browser law की वजह से dart2js इस्तेमाल करता है, loops के लिए नहीं।

Think first

DartPad एक File क्यों नहीं पढ़ सकता?

DartPad में, import 'dart:io' fail होता है, और कोई snippet events.txt नहीं खोल सकता। इस limit को इससे connect कीजिए कि DartPad का code असल में कहाँ execute होता है और BCA405-01 का एक rule, फिर tap कीजिए।

Show the answer

आपका snippet (compiled JS की तरह) एक browser page के अंदर चलता है, और browser pages sandboxed हैं: visitor की disk में पहुँचने का कोई रास्ता नहीं: वही security law जिसने BCA405-01 में सब कुछ shape किया। dart:io Dart की file-and-process library है उन programs के लिए जो एक real machine पर चलते हैं (command line, servers); एक browser tab वह जगह नहीं है, तो DartPad यह offer नहीं कर सकता। Practical consequence: file-handling Dart practice को असली machine पर असली SDK चाहिए: exactly वह route जो अगला lesson command line से formalise करता है।

Watch out

Tool-Boundary Confusions

DartPad "Dart lite" नहीं है: language पूरी है; ENVIRONMENT sandboxed है। Loops, classes, functions: सब core काम करता है।

dart2js सिर्फ़ Web Target के लिए है: phones को AOT native code मिलता है (पिछला lesson); यह मत लिखिए कि Flutter apps JavaScript की तरह ship होते हैं।

Compiled JS Hand-Editing के लिए नहीं है: dart2js output machine-optimised है; आप Dart maintain करते हैं, कभी generated .js नहीं: वही source-vs-output discipline जो आप हर compiler में मिले हैं।

Theory

एक Language, तीन Destinations

Dart का shipping map एक बार draw कीजिए: develop करते हुए JIT, phones के लिए native AOT, browsers के लिए dart2js: एक source, तीन runtimes, हर एक जो execute कर सकता है वही पाता है। वह map इस unit के why-questions को एक figure में answer करता है। अगला lesson tooling story complete करता है: Dart execute करने के 3 WAYS (command line, DartPad, IDE) और हर एक आपके week में अपनी जगह कब earn करता है।

Summary

Key takeaways

  • DartPad (dartpad.dev): zero-install browser editor: type कीजिए, Run, console output, shareable snippets।
  • इसकी sandbox limits: कोई dart:io नहीं (कोई files नहीं), कोई arbitrary packages नहीं: practice ground, build tool नहीं।
  • Browsers सिर्फ़ JavaScript execute करते हैं: dart2js Dart को web के लिए optimised JS में translate करता है।
  • Modern spelling: dart compile js app.dart; output dead-code elimination से lean है।
  • DartPad खुद पर्दे के पीछे आपके code को JS में compile करके चलाता है।
  • Phones को AOT native code मिलता है; web को JS मिलता है: एक language, per-target delivery।
  • Memory hook: pad practise करता है, dart2js translate करता है, browser सिर्फ़ JS बोलता है।

Study this properly

This page is the lesson to read. In Gri-Learn the same topic is a graded deck: the self-checks are scored and your weak topics are tracked. Free to start.

Start this topic

Already have an account? Sign in

More from Working with DART

Gri-Learn · syllabus-mapped B.C.A. lessons in English, Hindi and Gujarati

Online editor DartPad and dart2js tool · Mobile Application Development - 2 (option B) · Gri-Learn