Client-side web programming in Haskell: A retrospective
Client-side web programming in Haskell: A retrospective At the beginning of this decade (2010), a few of us Haskellers were exploring how best to do client-side web programming. We didn’t want to write JavaScript. There’s a surprising number of techniques we tried to avoid doing so. There was work coming from academia and industry. Here’s a history of my own experience in this problem space. In 20
JavaScript フレームワークを巡った話 - ジンジャー研究室
ポエムです。 自分の今の立場としては「Elm の人」ということになってるんだけど、どういう変遷でここまできて今どういうスタンスなのかっていうのはあんまり話す機会がない。だから整理のために考えてることを書いていくよ、というのがこの記事の趣旨。 非 Web の立場から そもそも自分は「Web 系」の出身ではない。新卒入社したワークスでは ERP パッケージを提供するのに画面を Web 技術で作ってるというだけで、別に SEO の順位を競ったり広告をどうという話ではないし、瞬時に画面が表示されないと離脱率が〜という話でもない。ただ、画面はとにかく複雑で設定項目とががうじゃうじゃある。 あと、学生時代に PC に触れたのが Windows で「黒画面なにそれ美味しいの？」くらいに GUI に染まりきってたというのがある。工学系の研究を効率化するために C# で GUI を作ってたら、なんかソフトウ
Elm に CodeMirror を埋め込む - Qiita
Elm で描画した要素の中に JavaScript のコンポーネントを埋め込みたくなることがたまにあります。この記事では、よくある例としてエディタを埋め込むサンプルを作ってみます。今回使うライブラリは CodeMirror です。 というわけで出来たのがこちら。 DEMO コード これだけだと分かりにくいですが、エディタはちゃんと Elm の中にいます。下手に DOM をいじると Virtual DOM がエラーを出しますが、ポイントさえ押さえれば特に問題ないようです。 Elm 側のコード #editor 要素を元に CodeMirror に初期化してもらいます。 CodeMirror 特有の事情としては、この要素のすぐ後にエディタの要素が挿入されるため、その場所に他の要素は置かないようにします。 view : Model -> Html Msg view model = div [ cl
2018 年は Hyperapp の年だ - Qiita
import { app } from "hyperapp" import { div, h1, button } from "@hyperapp/html" const state = { count: 0 } const actions = { down: value => state => ({ count: state.count - value }), up: value => state => ({ count: state.count + value }) } const view = (state, actions) => div([ h1(state.count), button({ onclick: () => actions.down(1) }, "–"), button({ onclick: () => actions.up(1) }, "+") ]) const
サーバーサイドの情報をHTMLに埋め込んでElmに渡す - Qiita
概要 本記事では、サーバーサイドの情報を Elm に渡す手法として、HTMLにJSONを埋め込む手法を紹介し、JSON Web API 経由で情報を渡す場合との比較を行います。 ぐぐってみるとこの手法自体は Elm 以外の文脈でもずいぶん昔から使われているようですが、なぜか「俺はこうやって実現したぜ」系の記事ばかりで、「なぜそれをやるの？」とか「既存手法と比べてどういうメリットやデメリットがあるの？」といったことにまともに言及している記事がほとんど見つからなくて、「マジ世の中ちょろいな」って感じなので、僕が勝手にまとめます。 問題提起 Elm で書かれたプログラムがサーバーサイドの情報を取得する際、多くの場合は JSON 形式の Web API を呼ぶことになると思います。 ただそのやり方だと、特にページ読み込み時の初期情報の取得において下記のデメリットがあります。 HTML をリクエスト
Elm を既存の JavaScript と併せて使う N の方法 - ジンジャー研究室
今月、社外向けに１回、社内向けに１回 Elm の紹介をしたところ、両方とも好評で「ぜひ使ってみたい」という声が多く、良かったと思う一方で、ここは補足すべきだったなーという点があったので書きます。 両者に共通して頻出だったのが、 既存プロジェクトの一部に導入するにはどうすればいいか JavaScript のライブラリは使えるのか という質問。 Elm の紹介としてはメインの話題じゃないんだけど、まぁ実際に導入しようと思ったら確かにそこ一番気になると思う。 Elm の初期化方法 まず、Elm の仕組みから見ていくと、例えば Main モジュールをエントリポイントとした場合、JavaScript 側で最も簡単に初期化する方法は次の通り。 <script src="/assets/elm.js"> <script> Elm.Main.fullscreen(); </script> fullscre
GitHub - jorgebucaran/hyperapp: 1kB-ish JavaScript framework for building hypertext applications
The tiny framework for building hypertext applications. Do more with less—We have minimized the concepts you need to learn to get stuff done. Views, actions, effects, and subscriptions are all pretty easy to get to grips with and work together seamlessly. Write what, not how—With a declarative API that's easy to read and fun to write, Hyperapp is the best way to build purely functional, feature-ri
CSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室
追記 最新の感想も合わせてご覧ください。 jinjor-labo.hatenablog.com React界隈では結構前から「CSS in JS」と言って、雑に言うと「CSSはイケてないからJSでインラインスタイルを書いてしまえ」という話がある。（ちゃんと知りたい人はこちら） 自分も前々からCSSは変数が使えないとか名前が被るとか諸々イケてないのは同意してたんだけど、じゃあJSで書くのが良いかと言われたら「いや流石にロジック汚れるんじゃね？」とか「CSSの便利機能を捨てて平気なの？」とか色々と懐疑的だったんだけど、１～２か月書いてみたら想像以上に良かったので感想を書くことにした。 まず一番に主張したい部分を先に言うと、こう。 （誤解）JSのコードがスタイル記述で汚れる （正解）JSのコードがスタイル記述から解放される 前提 実際に書いたのはJavaScriptではなくElmなので以下は全て
Elmで始めるFunctional Reactive Programming
※注意 現在のElmは、これを書いた時とはかなり別物になっています。そのためElmを学ぶにはこの資料は適切ではありません。Functional Reactive Programmingの習得には参考になると思います。 ===== ElmはHaskellと同じく純粋関数型言語のひとつで、ブラウザ上で動くアプリケーションの作成に特化しています。目に見えるものがすぐに作れるなど、関数型プログラミングやFRP(Functional Reactive Programming)の入門によい面がいくつかあります。JavaScriptなど型のない手続き型言語に慣れた人向けに関数型プログラミングのイメージを掴んでもらうことを目的にしています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【あるある】こんなコードは嫌だ【JavaScript】 - Qiita
GitHub - roman01la/js-memory-usage: Data Structures Memory Usage in JavaScript