こんにちわ、エンジニアのきむらです。現在は主にフロントエンドを担当しています。 今回は、SHOWROOMの新規機能開発にHyperappというJavaScriptフレームワークを採用したので、そのお話をします。 はじめに SHOWROOMは、ターゲットのプラットフォームをPC / iOS / Androidとしていますが、 iOS / Androidではアプリ内でWebViewコンポーネントを利用しWebページを表示している画面がまだ数多くあります。 既存のページは以下のJavaScriptフレームワーク / ライブラリを使用しています。 JQuery(https://jquery.com/) Underscore.js(https://underscorejs.org/) Backbone.js(http://backbonejs.org/) Marionette.js(https://
wget -O hyperapp.js https://unpkg.com/hyperapp wget -O hyperx.js https://wzrd.in/standalone/hyperx <body> <!--<script src="https://unpkg.com/hyperapp"></script>--> <!--<script src="https://wzrd.in/standalone/hyperx"></script>--> <script src="hyperapp.js"></script> <script src="hyperx.js"></script> <script> const { h, app } = hyperapp const html = hyperx(h) app({ model: "Hi.", view: model => html`<
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp
ちょっと話題のHyperappをTypeScriptとWebpackで試す。 今年は試行段階でもいいからもう少しまめにアウトプットしましょうということで…。とりあえず環境構築まで。 前提 ・開発マシンのOSはWindows 10(あんま関係ないはず) ・Visual Studio Code ・nodeインストール済み(記事中ではyarnを使います) webpackとtypescriptの準備 webpackもtypescriptも、グローバルインストールされていないものとします。 もちろんグローバルにインストールされていればここでのインストールは不要。 ・プロジェクト作成 > yarn init -y ・パッケージインストール > yarn add --dev typescript webpack webpackでtypescriptを読み込むためのローダも入れておく。 今回は名前がつよい
こんにちは、@binarytaです。 最近ちょくちょく噂を聞くHyperappに興味を持ったのでTypescriptと組み合わせて実践してみようと思います。 Vue.jsやReactもよく触れているのでこの辺との違いについても言及できたらと思ってます。 まずHyperappが提唱するコンセプトがこちら。 Minimal — Hyperapp was born out of the attempt to do more with less. We have aggressively minimized the concepts you need to understand while remaining on par with what other frameworks can do. Functional — Hyperapp's design is inspired by The Elm
Introduction Hyperapp - GitHub Hyperapp is a JavaScript library for building web applications. HyperappはWebアプリケーションのフロント(主にView)を担うJavaScript用のライブラリです。このライブラリは3つのコンセプトで成り立っています。 外部ライブラリに依存しない、超軽量1KBぐらいのライブラリ ステートレスコンポーネント Elm Architecture に則ったスケーラブル可能な仕組み 今回はHyperappのドキュメントを勝手に意訳1してみようと思います😌💡 Introduction Getting Started こんにちは世界 JSXで書いた場合 Hyperxで書いた場合 Build Setup JSXを使う環境の用意 Browserifyを使う場合 必要なモ
軽量・高速で、シンプルなJavaScriptライブラリー「HyperApp」を紹介。ライブラリーの作者が概要とサンプルを基に使い方を解説します。 複雑なツールを使いこなして優れたWebアプリケーションを構築するのは簡単ではありません。 HyperAppはシンプルさと機能の両立を目的に生まれたJavaScriptライブラリーです。ほかのフレームワークと同水準の機能を維持しながら、理解が必要な概念の数を極限まで削減しました。ReactやPreact、Mithrilと比べると、APIがコンパクトで、ステート管理が標準機能にあり、バンドルサイズが圧倒的に小さいところが特徴です。 HyperAppの概要、サンプルを使ったコードを解説します。ほかのフレームワークの使用経験は不要ですが、HTMLとJavaScriptの基礎知識があることが前提です。 HyperAppとは? HyperAppはインタラクテ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く