Elm Language ट्यूटोरियल
एल्म भाषा से शुरुआत करना
खोज…
टिप्पणियों
[एल्म] [१] एक अनुकूल कार्यात्मक प्रोग्रामिंग भाषा है जो जावास्क्रिप्ट के लिए संकलित है। एल्म ब्राउज़र-आधारित जीयूआई, एकल-पृष्ठ अनुप्रयोगों पर केंद्रित है।
उपयोगकर्ता आमतौर पर इसके लिए प्रशंसा करते हैं:
- कोई रनटाइम अपवाद नहीं।
- बेस्ट कंपाइलर एरर
- Refactoring की आसानी।
- अभिव्यंजक प्रकार प्रणाली
- एल्म आर्किटेक्चर , जो Redux से प्रेरित है।
संस्करण
| संस्करण | रिलीज़ की तारीख |
|---|---|
| 0.18.0 | 2016/11/14 |
| 0.17.1 | 2016/06/27 |
| 0.17 | 2016/05/10 |
| 0.16 | 2015/11/19 |
| 0.15.1 | 2015/06/30 |
| 0.15 | 2015/04/20 |
स्थापना
एल्म के साथ विकास शुरू करने के लिए, आपको एल्म-प्लेटफॉर्म नामक उपकरणों का एक सेट स्थापित करने की आवश्यकता है।
इसमें शामिल हैं: एल्म-मेक , एल्म-रिएक्टर , एल्म-रिप और एल्म-पैकेज ।
ये सभी उपकरण सीएलआई के माध्यम से उपलब्ध हैं, दूसरे शब्दों में आप इन्हें अपने टर्मिनल से उपयोग कर सकते हैं।
एल्म को स्थापित करने के लिए निम्न विधियों में से एक चुनें:
इंस्टॉलर का उपयोग करना
आधिकारिक वेबसाइट से इंस्टॉलर डाउनलोड करें और इंस्टॉलेशन विज़ार्ड का पालन करें।
एनपीएम का उपयोग करना
एल्म प्लेटफॉर्म को स्थापित करने के लिए आप नोड पैकेज मैनेजर का उपयोग कर सकते हैं।
वैश्विक स्थापना:
$ npm install elm -g
स्थानीय स्थापना:
$ npm install elm
स्थानीय रूप से स्थापित एल्म प्लेटफ़ॉर्म टूल के माध्यम से सुलभ हैं:
$ ./node_modules/.bin/elm-repl # launch elm-repl from local node_modules/
होमब्रे का उपयोग करना
$ brew install elm
एल्म-उपयोग के साथ संस्करणों के बीच स्विच करें
एल्म-उपयोग स्थापित करें
$ npm install -g elm-use
एक पुराने या नए एल्म संस्करण में स्विच करें
$ elm-use 0.18 // or whatever version you want to use
आगे की पढाई
जानें कि अपनी पहली परियोजना का आरंभ और निर्माण कैसे करें ।
नमस्ते दुनिया
प्रारंभ और निर्माण में इस कोड को संकलित करने का तरीका देखें
import Html
main = Html.text "Hello World!"
संपादकों
परमाणु
प्रकाश तालिका
उदात्त पाठ
शक्ति
Emacs
इंटेलीज आईडिया
कोष्ठक
वीएस कोड
आरम्भ और निर्माण
आपके पास आपके कंप्यूटर पर एल्म प्लेटफॉर्म स्थापित होना चाहिए, निम्नलिखित ट्यूटोरियल को इस धारणा के साथ लिखा गया है, कि आप टर्मिनल से परिचित हैं।
प्रारंभ
एक फ़ोल्डर बनाएँ और अपने टर्मिनल के साथ उस पर नेविगेट करें:
$ mkdir elm-app
$ cd elm-app/
एल्म परियोजना की शुरुआत करें और मुख्य निर्भरताएं स्थापित करें:
$ elm-package install -y
elm-package.json और elm-stuff फ़ोल्डर आपके प्रोजेक्ट में दिखाई देना चाहिए।
अपने आवेदन Main.elm लिए प्रवेश बिंदु बनाएं और Main.elm हैलो वर्ल्ड उदाहरण पेस्ट करें।
परियोजना का निर्माण
अपना पहला प्रोजेक्ट बनाने के लिए, दौड़ें:
$ elm-make Main.elm
यह Main.elm फ़ाइल (और सभी निर्भरता) को जावास्क्रिप्ट में संकलित और HTML में Main.elm साथ index.html का उत्पादन करेगा। कोशिश करो और इसे अपने ब्राउज़र में खोलें!
यदि यह त्रुटि के साथ विफल होता है तो I cannot find module 'Html'. इसका मतलब है कि आप एल्म के नवीनतम संस्करण का उपयोग नहीं कर रहे हैं। आप समस्या को हल कर सकते हैं या तो एल्म को अपग्रेड करके और पहले चरण को फिर से कर सकते हैं, या निम्न कमांड के साथ:
$ elm-package install elm-lang/html -y
यदि आपके पास अपनी खुद की index.html फ़ाइल है (उदाहरण के लिए, पोर्ट के साथ काम करते समय), तो आप अपनी एल्म फ़ाइलों को एक जावास्क्रिप्ट फ़ाइल में संकलित कर सकते हैं:
$ elm-make Main.elm --output=elm.js
उदाहरण में अधिक जानकारी HTML में एम्बेड करना ।
स्टाइल गाइड और एल्म-प्रारूप
आधिकारिक स्टाइल गाइड मुखपृष्ठ पर स्थित है और आम तौर पर इसके लिए जाता है:
- पठनीयता (कॉम्पैक्टनेस के बजाय)
- संशोधन की आसानी
- साफ अलग है
इसका मतलब है कि, उदाहरण के लिए, यह:
homeDirectory : String
homeDirectory =
"/root/files"
evaluate : Boolean -> Bool
evaluate boolean =
case boolean of
Literal bool ->
bool
Not b ->
not (evaluate b)
And b b' ->
evaluate b && evaluate b'
Or b b' ->
evaluate b || evaluate b'
से बेहतर माना जाता है:
homeDirectory = "/root/files"
eval boolean = case boolean of
Literal bool -> bool
Not b -> not (eval b)
And b b' -> eval b && eval b'
Or b b' -> eval b || eval b'
टूल एल्म-फॉर्मेट आपके स्रोत कोड को आपके लिए स्वचालित रूप से (आमतौर पर सेव पर), गो भाषा के गोफ़्म के समान एक नस में मदद करता है । फिर से, अंतर्निहित मूल्य में एक सुसंगत शैली होती है और टैब्स बनाम रिक्त स्थान या इंडेंटेशन लंबाई जैसे विभिन्न मुद्दों के बारे में तर्कों और फ्लैमवार्स की बचत होती है ।
आप गिथब रेपो पर निर्देशों का पालन करते हुए elm-format स्थापित कर सकते हैं। फिर एल्म फ़ाइलों को स्वचालित रूप से प्रारूपित करने के लिए अपने संपादक को कॉन्फ़िगर करें या elm-format FILE_OR_DIR --yes मैन्युअल रूप से elm-format FILE_OR_DIR --yes ।
HTML में एम्बेड करना
मौजूदा HTML पृष्ठ में एल्म कोड डालने की तीन संभावनाएँ हैं।
शरीर टैग में एम्बेड करें
मान लीजिए कि आपने हैलो वर्ल्ड उदाहरण को elm.js फ़ाइल में संकलित किया है, तो आप एल्म को <body> जैसे:
<!DOCTYPE html>
<html>
<body>
<script src="elm.js"></script>
<script>
Elm.Main.fullscreen()
</script>
</body>
</html>
चेतावनी : कभी-कभी कुछ क्रोम एक्सटेंशन <body> साथ गड़बड़ करते हैं, जिसके कारण आपका ऐप उत्पादन में टूट सकता है। यह हमेशा एक विशिष्ट div में एम्बेड करने के लिए अनुशंसित है। अधिक जानकारी यहाँ ।
Div (या अन्य DOM नोड) में एम्बेड करें
वैकल्पिक रूप से, ठोस HTML तत्व प्रदान करके, एल्म कोड को उस विशिष्ट पृष्ठ तत्व में चलाया जा सकता है:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<div id='app'></div>
<script src="elm.js"></script>
<script>
Elm.Main.embed(document.getElementById('app'))
</script>
</body>
</html>
वेब कार्यकर्ता के रूप में एम्बेड करें (कोई UI नहीं)
एल्म कोड को एक कार्यकर्ता के रूप में भी शुरू किया जा सकता है और बंदरगाहों के माध्यम से संवाद किया जा सकता है:
<!DOCTYPE html>
<html>
<head>
<title>Hello Worker</title>
</head>
<body>
<script src="elm.js"></script>
<script>
var app = Elm.Main.worker();
app.ports.fromElmToJS.subscribe(function(world) {
console.log(world)
});
app.ports.fromJSToElm.send('hello');
</script>
</body>
</html>
आरईपीएल
एल्म के बारे में जानने का एक अच्छा तरीका आरईपीएल (रीड-एवल-प्रिंट लूप) में कुछ अभिव्यक्ति लिखने की कोशिश करना है। अपने elm-app फ़ोल्डर में एक कंसोल खोलें (जो आपने इनिशियलाइज़ एंड बिल्ड फेज में बनाया है) और निम्नलिखित को आज़माएँ:
$ elm repl
---- elm-repl 0.17.1 -----------------------------------------------------------
:help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
--------------------------------------------------------------------------------
> 2 + 2
4 : number
> \x -> x
<function> : a -> a
> (\x -> x + x)
<function> : number -> number
> (\x -> x + x) 2
4 : number
>
elm-repl वास्तव में एक बहुत शक्तिशाली उपकरण है। मान लें कि आप निम्नलिखित कोड के साथ अपने elm-app फ़ोल्डर के अंदर एक Test.elm फ़ाइल बनाते हैं:
module Test exposing (..)
a = 1
b = "Hello"
अब, आप अपने REPL (जो खुले रह गए हैं) पर वापस जाएँ और टाइप करें:
import Test exposing (..)
> a
1 : number
> b
"Hello" : String
>
और भी प्रभावशाली, यदि आप अपनी Test.elm फ़ाइल में एक नई परिभाषा Test.elm हैं, जैसे कि
s = """
Hello,
Goodbye.
"""
अपनी फ़ाइल सहेजें, अपने REPL पर एक बार फिर से जाएं, और फिर से Test आयात किए बिना, नई परिभाषा तुरंत उपलब्ध है:
> s
"\nHello,\nGoodbye.\n" : String
>
यह वास्तव में सुविधाजनक है जब आप अभिव्यक्ति लिखना चाहते हैं जो कई पंक्तियों को फैलाती है। यह उन कार्यों का त्वरित परीक्षण करने के लिए भी बहुत उपयोगी है जिन्हें आपने अभी परिभाषित किया है। अपनी फ़ाइल में निम्न जोड़ें:
f x =
x + x * x
सहेजें और REPL पर वापस जाएं:
> f
<function> : number -> number
> f 2
6 : number
> f 4
20 : number
>
हर बार जब आप आयात की गई किसी फ़ाइल को संशोधित करते हैं और सहेजते हैं, और आप REPL पर वापस जाते हैं और कुछ भी करने का प्रयास करते हैं, तो पूरी फ़ाइल फिर से तैयार हो जाती है। इसलिए यह आपको आपके कोड में किसी भी त्रुटि के बारे में बताएगा। इसे जोड़ो:
c = 2 ++ 2
उसकी कोशिश करो:
> 0
-- TYPE MISMATCH -------------------------------------------------- ././Test.elm
The left argument of (++) is causing a type mismatch.
22| 2 ++ 2
^
(++) is expecting the left argument to be a:
appendable
But the left argument is:
number
Hint: Only strings, text, and lists are appendable.
>
आरईपीएल के लिए इस परिचय को समाप्त करने के लिए, आइए जोड़ते हैं कि elm-repl उन पैकेजों के बारे में भी जानता है जिन्हें आपने elm package install साथ elm package install । उदाहरण के लिए:
> import Html.App
> Html.App.beginnerProgram
<function>
: { model : a, update : b -> a -> a, view : a -> Html.Html b }
-> Platform.Program Basics.Never
>
स्थानीय बिल्ड सर्वर (एल्म रिएक्टर)
एल्म रिएक्टर आपके आवेदन के प्रोटोटाइप के लिए आवश्यक उपकरण है।
कृपया ध्यान दें कि आप को संकलित करने में सक्षम नहीं होगा Main.elm , एल्म रिएक्टर के साथ करता है, तो आप उपयोग कर रहे Http.App.programWithFlags या बंदरगाहों
प्रोजेक्ट डायरेक्टरी में एल्म-रिएक्टर चलाने से प्रोजेक्ट एक्सप्लोरर के साथ एक वेब सर्वर शुरू होगा, जो आपको हर अलग कंपोनेंट को संकलित करने की अनुमति देता है।
जब आप पृष्ठ को पुनः लोड करते हैं तो आपके कोड में कोई भी परिवर्तन अपडेट किया जाता है।
$ elm-reactor # launch elm-reactor on localhost:8000
$ elm-reactor -a=0.0.0.0 -p=3000 # launch elm-reactor on 0.0.0.0:3000