Rails에서 유쾌한 언어 Elm 사용

11615 단어 Rails5 Rails Elm

Rails 5.1에서 webpacker가 함께 제공됩니다.

이 기회에 새로운 JS 프레임워크에 도전하고 싶지만, React·Vue·Angular 중 어느 것에 도전할지 헤매고 있다는 사람은 많을 것입니다.

하지만! 사실 Webpacker에는 또 다른 JS 프레임 워크가 있습니다!

Elm은 무엇입니까?

자세한 내용은 공식 페이지, 얇은 책 등을 참조하세요.

대략적으로는, 이런 특징이 있는 언어입니다.

Elm은 Haskell 기반 언어로 웹 페이지를 구현할 수 있습니다 (React 또는 Vue와 같은 라이브러리가 아님)

Elm은 미리 브라우저에서 읽을 수있는 형식으로 컴파일합니다 (CoffeeScript 및 TypeScript와 같이)

Elm은 JavaScript뿐만 아니라 HTML 및 CSS도 직접 조작 할 수 있습니다

Elm에는 모듈과 같은 기능도 포함되어 있습니다

React의 JSX나 ES6가 현실적으로 WEB를 진보시키고 있는 반면, Elm은 미래를 하고 있다고 말할 수 있을지도 모릅니다.

Elm 설치

실은 Webpacker가 몰래 서포트하고 있어 특히 어려운 일은 없습니다. React 및 Vue와 동일합니다. htps : // 기주 b. 코 m / 라이 ls / ぇ b 파 케 r # 에 lm

앱을 만들 때 --webpack=elm를 붙이기 만하면됩니다 1

$ rails new myapp --webpack=elm

rails 및 webpack 서버를 시작합니다.



$ bin/rails server

$ bin/webpack-dev-server # 別コンソールなどで開く

다만, 초기 상태에서는 Webpack측의 JS를 Rails측이 읽어들여 있지 않기(원래 페이지가 하나도 없다) 때문에, 적당한 페이지를 만들어, View에 javascript_pack_tag를 넣습니다.

# app/views/examples/show.html.erb
<h1>Example</h1>
<%= javascript_pack_tag "hello_elm" %>

# config/routes.rb
Rails.application.routes.draw do
  resource 'example', only: [:show]
end

# app/controllers/examples_controller.rb
class ExamplesController < ApplicationController
  def show
  end
end

http://localhost:3000/example에 액세스하면 재미없는 샘플 화면을 볼 수 있습니다.

그러나 오른쪽 하단에 검은 조작 이력 위젯이 표시되는 것이 Elm의 다른 것과 다른 곳입니다 (후술).

Elm의 다른 샘플을 사용해보기

Elm 공식 페이지에 있는 다소 복잡한 SPA의 샘플 이동해 봅시다.

Elm의 소스는 단순히 복사합니다.

$ git clone [email protected]:rtfeldman/elm-spa-example.git
$ cp -R elm-spa-example/src/* myapp/app/javascript/packs/
$ cp elm-spa-example/elm-package.json myapp/

elm-package.json의 경로는 Webpack의 경로로 다시 작성됩니다.

    "source-directories": [
-        "src"
+        "app/javascript/packs/"
    ],

또한 elm-spa-example은 외부 CSS를 읽었으므로 application.html.erb에 CSS를 추가합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    <!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
    <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
    <!-- Import the custom Bootstrap 4 theme from our hosted CDN -->
    <link rel="stylesheet" href="//demo.productionready.io/main.css">
    <style>/* Loading spinner courtesy of loader.io */
    .sk-three-bounce { margin-right: 10px; } .sk-three-bounce .sk-child { width: 14px; height: 14px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; } .sk-three-bounce .sk-bounce1 { -webkit-animation-delay: 0.28s; animation-delay: 0.28s; } .sk-three-bounce .sk-bounce2 { -webkit-animation-delay: 0.44s; animation-delay: 0.44s; } .sk-three-bounce .sk-bounce3 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes sk-three-bounce { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-three-bounce { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } }
    </style>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

자장! Rails 앱 내에서 Elm 앱이 작동합니다!

또한 오른쪽 하단의 검은 위젯을 클릭해 봅시다.

Elm은 언어 기능에 따라 상태를 로직과 완전히 분리하므로 앱 측은 아무것도 하지 않아도 현재의 내부 상태를 열람할 수 있습니다.

빠진 곳 · 유감이었던 곳

Elm은 최신 버전이 v0.18이며 아직 v1.0이 없습니다. 따라서 언어 사양이 자주 변경됩니다. 샘플이 움직이지 않으면 elm-package.json의 버전을 살펴보십시오.

또한 webpacker에서는 Native module (Elm의 모듈을 JS로 쓸 수있는 기능)이 아직 잘 작동하지 않는 것이 유감이었습니다.

전반적인 견해

Elm은 FRP 등, 선진적인 기능이 가득하기 때문에, 대단히 공부가 됩니다만, 반면 「실험적」「장난감」「실무에서는 사용할 수 없다」라고 하는 인상이 강한 것이 난점이었습니다.

Rails 앱에 내장 할 수 있다면,

인터랙티브 성이 필요한 부분은 Elm으로 쓴다

Elm에서 쓰기 어려운 부분은 Rails로 도망간다

라고, 구분할 수 있게 되었으므로, 슬슬 실무로 사용해도 괜찮지 않을까? 라고 생각했습니다.

rails new --help 설명에는 --webpack에 elm를 전달할 수있는 설명이 없습니다. Elm은 여전히 실험적 지원이라는 것입니까? ↩

Reference

이 문제에 관하여(Rails에서 유쾌한 언어 Elm 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tonluqclml/items/81bc0142bad2b401b856

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

왠지 Elm 코드는 인수서가 없을 정도로 멋지다.

Style Elements 사용해 보았습니다!

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다