《 느릅나무 》 소개.
9019 단어 elmfrontendfunctional
간단한 소개
전방 개발자로서 우리는 대량의 기술이 우리가 신속하고 신뢰할 수 있으며 안전한 사이트를 구축하는 데 도움을 줄 수 있을 뿐만 아니라 인코딩할 때도 우리에게 즐거움을 가져다 줄 수 있다는 것을 안다.내 목표는 너희들에게 Elm이라는 기술을 소개하는 것이다.
Elm은 Evan Czaplicki가 2012년 초에 만든 프로그래밍 언어로 전단 개발에 전념했다.물론 신선한 일은 아니지만, Angular, React, Vue 등 자바스크립트 프레임워크의 통상적인 생각과는 다를 것이다.이런 방식을 통해 Elm은 Svelte에 비유될 수 있다. 왜냐하면 둘 다 자바스크립트 코드를 최종적으로 출력하는 컴파일러가 있기 때문이다.
Elm의 발전을 추진하는 한 마디는'신뢰할 수 있는 인터넷 응용의 유쾌한 언어'이다. 나는 개인적으로 이것이 매우 진실하다고 생각한다.코드를 작성하는 것은 매우 즐겁습니다. 컴파일러가 전체 코드 라이브러리에 있는 모든 오류를 보여 줄 것이라고 믿을 수 있습니다.
코드를 검토하기 전에 몇 가지 질문에 답해 보겠습니다.
문제.
#1. 왜 다른 언어를 배우는 데 신경을 쓰십니까?
첫 번째 일.너는 왜 다른 언어가 있는지 생각해 본 적이 있니?모든 언어는 그 자체의 목적, 그 자체의 초점, 그리고 그 자체의 구조를 가지고 있다. 이것은 모든 언어에 대해 비슷한 생각을 완전히 다른 방식으로 표현할 수 있다는 것을 의미한다.
"그리고..."모든 임무에는 다른 임무보다 더 적합한 언어가 있다.예를 들어, 만약 당신이 마이크로 컨트롤러를 위해 코드를 작성하려고 한다면, C는 자바스크립트보다 당신의 요구에 더 적합할 수 있고, 다른 한편, 개발 사이트는 자바스크립트를 더욱 쉽게 사용할 수 있을 것이다.나의 관점은 언어 자체가 다른 언어보다 더 좋고 당신의 요구를 살펴보고 의식적인 선택을 하는 언어 자체가 없다는 것이다.
Elm이 Javascript보다 좋아요?아니요!그것이 하는 것은 같은 결과를 실현하기 위해 서로 다른 도구를 제공하는 것이다.
#2 Elm이 Javascript로 컴파일되면 왜 프레임을 사용하지 않습니까?
마찬가지로 한 언어가 하나의 틀보다 좋지는 않고, 반대로도 그렇지만, 이 두 언어 사이에는 근본적인 차이가 있다.틀을 선택할 때 그 틀을 선택해야 할 뿐만 아니라 그 뒤에 있는 언어로 자신을 약속해야 한다. 다시 말하면 하나의 틀은 언어와 그 구조와 밀접하게 연결되어 있기 때문에 틀을 선택해야 할 뿐만 아니라 자신의 장단점을 가진 언어도 선택해야 한다.
예를 들면 도움이 될 수 있다.만약 당신이 웹 개발을 배우고 React 과정을 배우기를 원하는 학생이라면 선택의 여지가 없이 자바스크립트만 배울 수 있습니다. 그러나 사실은 그렇지 않습니다. 자바스크립트 과정을 배우는 것은 당신을React와 연결시킬 수 없습니다.
그래서 두 번째 문제는 무효다.너는 언어와 구조를 비교할 수 없다. 단지 그것들은 등가가 아니기 때문이다.여기서 진정한 문제는'왜 나는 자바스크립트가 아닌 Elm을 사용해야 합니까?'
#3 이 새로 온 아이를 사용하기 위해 코드 라이브러리 전체를 다시 써야 합니까?
아니요!
Elm은 다른 기술처럼 점차적으로 채택될 수 있다.모든 기술은 시작과 끝이 있는데 이것은 Elm에 있어서 다를 것이 없기 때문에 전체 코드 라이브러리를 재구성할 이유가 없다. 결국 이익보다 폐해가 더 큰 기술을 얻을 수 있다.
더 실용적인 것은 Elm이 자바스크립트를 출력하기 때문에, Elm이 제어하는 노드 (예: div) 를 정의하는 것부터 시작할 수 있습니다.
다음 예는 다음과 같습니다.
elm make src/Main.elm --output=main.js
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<script src="main.js"></script>
</head>
<body>
<div id="myapp"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById('myapp')
});
</script>
</body>
</html>
먼저 Elm(Main.Elm)을 js 파일(Main.js)로 컴파일한 다음 스크립트를div(#my app)에 연결하여 실행합니다.이렇게 간단해!
#4. 곡선을 배우는 건 어때?
사람마다 다 있다.Elm은 순수한 함수식 언어이다. 이것은 대다수 사람들이 습관적으로 사용하는 작업 모델이 아니지만, 동시에 우리는 점점 더 많은 언어가 함수식 구조를 채택하는 것을 볼 수 있다. 이것은 도움이 될 것이다.다음은 몇 가지 예입니다.
// Have you ever assigned a function to a variable?
var sum = function(a, b) {
return a + b;
};
// Or used a Arrow function?
var el = document.getElementById("t");
el.addEventListener("click", () => console.log('clicked!'));
// Called map, filter or reduce on an array?
var grades = [1, 3, 2, 8, 4, 9, 5, 6, 7];
var total = grades
.filter((grade) => grade > 5)
.map((grade) => grade * 10)
.reduce((partialTotal, grade) => partialTotal + grade, 0);
모든 이 예들은 자바스크립트 등 주류 언어가 사용하는 함수 구조이다.물론 이것은 다른 것이지만, 중요한 것은 모든 것이 네가 이미 알고 있는 것과 다르다는 것을 알아야 한다는 것이다.
구문은 C 시리즈가 아니라 ML에서 파생되므로 다음 구문을 사용합니다.
function add(a, b) {
return a + b;
}
이렇게 코드를 작성할 수 있습니다.
add a b = a + b
다른 측면에서 볼 때, 이 언어는 구조가 거의 없고, 컴파일러는 당신이 볼 수 있는 가장 좋은 오류 메시지를 제공하기 때문에, 너무 많은 시간을 공부해서는 안 된다.
컴파일러 오류 메시지를 보려면 다음과 같이 하십시오.
... 에서 오다https://elm-lang.org/news/compilers-as-assistants
이것은 통속적이고 알기 쉬운 영어입니다. 오류에 따라 컴파일러는 그것을 당신에게 가리킬 뿐만 아니라, 어떻게 그것을 복구하는지 알려 줍니다.
#Elm 생산 준비 됐나요?
완전히!많은 회사들이 elm을 사용하고 있는데 그 중에서 가장 유명한 회사는Noredik이다.
마무리
새로운 사물을 처리할 때 항상 의문이 있지만, 다른 일과 마찬가지로, 우리는 그것이 우리의 환경에 적합한지 스스로 시험해 보아야 한다.이 모든 문제들(그리고 다른 문제들)은 항상 나로 하여금 반성하고 마음을 열어 내가 확실하지 않을 수 있는 일들에 직면하게 한다.
나도 너에게 좀 궁금하게 할 수 있기를 바란다. 나는 이 블로그 시리즈의 두 번째 부분에서 너를 만나고 싶다.
유용한 자원
Elm Lang Official Guide
Elm Programming
Reference
이 문제에 관하여(《 느릅나무 》 소개.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/alissonfpmorais/a-gentle-introduction-to-elm-j4m
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
elm make src/Main.elm --output=main.js
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<script src="main.js"></script>
</head>
<body>
<div id="myapp"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById('myapp')
});
</script>
</body>
</html>
// Have you ever assigned a function to a variable?
var sum = function(a, b) {
return a + b;
};
// Or used a Arrow function?
var el = document.getElementById("t");
el.addEventListener("click", () => console.log('clicked!'));
// Called map, filter or reduce on an array?
var grades = [1, 3, 2, 8, 4, 9, 5, 6, 7];
var total = grades
.filter((grade) => grade > 5)
.map((grade) => grade * 10)
.reduce((partialTotal, grade) => partialTotal + grade, 0);
function add(a, b) {
return a + b;
}
add a b = a + b
새로운 사물을 처리할 때 항상 의문이 있지만, 다른 일과 마찬가지로, 우리는 그것이 우리의 환경에 적합한지 스스로 시험해 보아야 한다.이 모든 문제들(그리고 다른 문제들)은 항상 나로 하여금 반성하고 마음을 열어 내가 확실하지 않을 수 있는 일들에 직면하게 한다.
나도 너에게 좀 궁금하게 할 수 있기를 바란다. 나는 이 블로그 시리즈의 두 번째 부분에서 너를 만나고 싶다.
유용한 자원
Elm Lang Official Guide
Elm Programming
Reference
이 문제에 관하여(《 느릅나무 》 소개.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/alissonfpmorais/a-gentle-introduction-to-elm-j4m텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
