मिनी ऐप्लिकेशन ओपन सोर्स प्रोजेक्ट

थॉमस स्टाइनर

Twitter GitHub Glitch Mastodon होम पेज

ध्यान दें: यह पोस्ट, लेख के कलेक्शन का हिस्सा है. इसका हर लेख, पिछले लेखों को ध्यान में रखकर बनाया गया है. अगर आप यहां आए हैं, तो हो सकता है कि आप शुरुआत से पढ़ना शुरू करना चाहें.

Kबोन

kबोन प्रोजेक्ट (GitHub पर ओपन सोर्स), एक ऐसा अडैप्टर लागू करता है जो अडॉप्शन लेयर में ब्राउज़र एनवायरमेंट की तरह काम करता है. इससे वेब के लिए लिखा गया कोड मिनी ऐप्लिकेशन में बिना बदलाव किए चल सकता है. Vue, React, और Preact जैसे कई स्टार्टर टेंप्लेट मौजूद होते हैं. इनसे, इन फ़्रेमवर्क से आने वाले वेब डेवलपर के लिए ऑनबोर्डिंग अनुभव आसान हो जाता है.

kbone-cli टूल की मदद से एक नया प्रोजेक्ट बनाया जा सकता है. एक जादूगर आपसे पूछता है कि प्रोजेक्ट को किस फ़्रेमवर्क से शुरू करना है. नीचे दिया गया कोड स्निपेट, Preact का डेमो दिखाता है. नीचे दिए गए कोड स्निपेट में, mp कमांड मिनी ऐप्लिकेशन बनाता है, web निर्देश वेब ऐप्लिकेशन बनाता है, और build प्रोडक्शन वेब ऐप्लिकेशन बनाता है.

npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build

नीचे दिया गया कोड स्निपेट एक आसान काउंटर कॉम्पोनेंट दिखाता है, जो फिर मिनी ऐप्लिकेशन और वेब ऐप्लिकेशन में अजीबोगरीब तरीके से रेंडर होता है. मिनी ऐप्लिकेशन का ओवरहेड अहम है और पूरी तरह से डीओएम स्ट्रक्चर के आधार पर दिखाया गया है.

import { h, Component } from "preact";
import "./index.css";

class Counter extends Component {
  state = { count: 1 };

  sub = () => {
    this.setState((prevState) => {
      return { count: --prevState.count };
    });
  };

  add = () => {
    this.setState((prevState) => {
      return { count: ++prevState.count };
    });
  };

  clickHandle = () => {
    if ("undefined" != typeof wx && wx.getSystemInfoSync) {
      wx.navigateTo({
        url: "../log/index?id=1",
      });
    } else {
      location.href = "log.html";
    }
  };

  render({}, { count }) {
    return (
      <div>
        <button onClick={this.sub}>-</button>
        <span>{count}</span>
        <button onClick={this.add}>+</button>
        <div onClick={this.clickHandle}>跳转</div>
      </div>
    );
  }
}

export default Counter;

Preact kबोन टेंप्लेट का डेमो ऐप्लिकेशन, WeChat DevTools में खोला गया. कॉम्प्लेक्स DOM स्ट्रक्चर पर ध्यान दें. साथ ही, ध्यान दें कि कैसे प्लस और माइनस बटन, <button> एलिमेंट नहीं हैं.

Preact kबोन टेंप्लेट का डेमो ऐप्लिकेशन, वेब ब्राउज़र में खोला गया. DOM स्ट्रक्चर पर ध्यान दें.

kbone-ui

kbone-ui प्रोजेक्ट (GitHub पर ओपन सोर्स) एक यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क है. यह kबोन के साथ, मिनी ऐप्लिकेशन डेवलपमेंट के साथ-साथ Vue.js डेवलपमेंट, दोनों की सुविधा देता है. केबोन-यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट, WeChat में पहले से मौजूद मिनी ऐप्लिकेशन कॉम्पोनेंट के लुक और स्टाइल की नकल करते हैं (ऊपर दिए गए कॉम्पोनेंट भी देखें). सीधे ब्राउज़र में चलने वाले डेमो की मदद से, उपलब्ध कॉम्पोनेंट को एक्सप्लोर किया जा सकता है.

kबोन-ui डेमो, जिसमें फ़ॉर्म से जुड़े कॉम्पोनेंट दिख रहे हैं.

WeUI

WeUI, बेसिक स्टाइल की लाइब्रेरी का एक सेट है, जो WeChat के डिफ़ॉल्ट विज़ुअल अनुभव के मुताबिक काम करता है. WeChat की आधिकारिक डिज़ाइन टीम ने, WeChat के इंटरनल वेब पेजों और WeChat के मिनी ऐप्लिकेशन के लिए डिज़ाइन को तैयार किया है. इसमें button, cell, dialog, progress, toast, article, actionsheet, और icon जैसे कॉम्पोनेंट शामिल हैं. WeUI के कई वर्शन उपलब्ध हैं, जैसे कि WeChat मिनी ऐप्लिकेशन के लिए, जिसे WXSS की स्टाइल में बनाया गया है (ऊपर स्टाइलिंग देखें), वेब ऐप्लिकेशन के लिए weui.js, और WeChat React कॉम्पोनेंट के लिए react-weui इस्तेमाल करना.

WeUI डेमो ऐप्लिकेशन, स्विच दिखा रहा है.

ओमी

Omi एक ऐसा फ़्रंटएंड क्रॉस-फ़्रेमवर्क फ़्रेमवर्क है जिसका आपने खुद दावा किया है (GitHub पर ओपन सोर्स. यह छोटे साइज़ और बेहतर परफ़ॉर्मेंस वाले एक फ़्रेमवर्क में वेब कॉम्पोनेंट, JSX, वर्चुअल DOM, फ़ंक्शनल स्टाइल, ऑब्ज़र्वर या प्रॉक्सी को मर्ज करता है. इसका लक्ष्य डेवलपर को कॉम्पोनेंट एक बार लिखने और Omi, React, Preact, Vue.js या Angular जैसी जगहों पर उनका इस्तेमाल करने की सुविधा देना है. ओमी कॉम्पोनेंट लिखना बहुत आसान है और इनमें करीब सभी बॉयलरप्लेट नहीं लिखे जाते.

import { render, WeElement, define } from "omi";

define("my-counter", class extends WeElement {
  data = {
    count: 1,
  };

  static css = `
    span{
        color: red;
    }`;

  sub = () => {
    this.data.count--;
    this.update();
  };

  add = () => {
    this.data.count++;
    this.update();
  };

  render() {
    return (
      <div>
        <button onClick={this.sub}>-</button>
        <span>{this.data.count}</span>
        <button onClick={this.add}>+</button>
      </div>
    );
  }
});

render(<my-counter />, "body");

ओमियू

Omiu एक क्रॉस फ़्रेमवर्क यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट लाइब्रेरी है (GitHub पर ओपन सोर्स), Omi के आधार पर डेवलप किया गया है, जो स्टैंडर्ड वेब कॉम्पोनेंट के कस्टम एलिमेंट देता है.

Omiu डेमो ऐप्लिकेशन में स्विच दिख रहे हैं.

WePY

WePY एक ऐसा फ़्रेमवर्क है जो मिनी ऐप्लिकेशन को कॉम्पोनेंट के डेवलपमेंट में मदद करने की अनुमति देता है. प्री-कंप्यूलेशन के ज़रिए डेवलपर, मिनी ऐप्लिकेशन बनाने के लिए अपनी पसंदीदा डेवलपमेंट स्टाइल चुन सकते हैं. फ़्रेमवर्क का बेहतर ऑप्टिमाइज़ेशन और प्रॉमिस और एसिंक्रोनस फ़ंक्शन की शुरुआत की वजह से, मिनी ऐप्लिकेशन प्रोजेक्ट बनाना आसान और बेहतर हो जाता है. साथ ही साथ, WePY एक उभरता हुआ फ़्रेमवर्क भी है, जिसने काफ़ी हद तक कुछ ऑप्टिमाइज़ किए गए फ़्रंटएंड टूल और फ़्रेमवर्क डिज़ाइन के सिद्धांतों और आइडिया को शामिल किया है. ज़्यादातर काम Vue.js से मिले हैं.

<style lang="less">
  @color: #4d926f;
  .num {
    color: @color;
  }
</style>

<template>
  <div class="container">
    <div class="num" @tap="num++">{{num}}</div>
    <custom-component></custom-component>
    <vendor-component></vendor-component>
    <div>{{text}}</div>
    <input v-model="text" />
  </div>
</template>

<config>
  { usingComponents: { customComponent: '@/components/customComponent', vendorComponent:
  'module:vendorComponent' } }
</config>

<script>
  import wepy from "@wepy/core";

  wepy.page({
    data: {
      num: 0,
      text: "Hello World",
    },
  });
</script>

WePY "शुरुआत करना" दस्तावेज़.

vConsole

vConsole प्रोजेक्ट, मोबाइल वेब पेजों के लिए एक हल्का और बड़ा किया जा सकने वाला फ़्रंटएंड डेवलपर टूल उपलब्ध कराता है. यह DevTools जैसा डीबगर देता है. इसे सीधे वेब ऐप्लिकेशन और मिनी ऐप्लिकेशन में इंजेक्ट किया जा सकता है. डेमो में अवसरों को दिखाया जाता है. vConsole में लॉग, सिस्टम, नेटवर्क, एलिमेंट, और स्टोरेज के टैब शामिल होते हैं.

एलिमेंट एक्सप्लोरर दिखाने वाला vConsole डेमो ऐप्लिकेशन.

वेब

weweb प्रोजेक्ट (GitHub पर ओपन सोर्स), Hera मिनी ऐप्लिकेशन फ़्रेमवर्क का बुनियादी फ़्रंटएंड फ़्रेमवर्क है. यह दावा करता है कि यह WeChat के मिनी ऐप्लिकेशन के सिंटैक्स के साथ काम करता है, ताकि वेब ऐप्लिकेशन को मिनी ऐप्लिकेशन की तरह लिखा जा सके. इस दस्तावेज़ में यह वादा किया गया है कि अगर आपके पास पहले से ही कोई मिनी ऐप्लिकेशन है, तो उसे वेब पर चलने के लिए ब्राउज़र में चलाया जा सकता है. मेरे प्रयोगों में, मौजूदा मिनी ऐप्लिकेशन के लिए यह सही तरीके से काम नहीं कर रहा था. शायद ऐसा इसलिए है, क्योंकि हाल ही में इस प्रोजेक्ट के अपडेट नहीं हुए हैं, जिसकी वजह से इसके कंपाइलर को WeChat प्लैटफ़ॉर्म में बदलाव करने की ज़रूरत नहीं पड़ी.

Hera mini ऐप्लिकेशन फ़्रेमवर्क दस्तावेज़, काम करने वाले WeChat एपीआई की सूची दिखा रहा है.

ब्राउज़र में चलाने के लिए, webweb डेमो मिनी ऐप्लिकेशन को वेब से इकट्ठा किया गया है.

पूरा हुआ: अगले चैप्टर में, आपको मिनी ऐप्लिकेशन को प्रोग्राम करने के तरीके के बारे में बताया जाएगा.

स्वीकारें

इस लेख की समीक्षा जो मेडले, कायस बैस्क्स, मिलिका मिहाज्लीजा, ऐलन केंट, और कीथ गू ने की है.