SHOWROOMの新規開発にHyperappを採用した話 - SHOWROOM Tech Blog
こんにちわ、エンジニアのきむらです。現在は主にフロントエンドを担当しています。 今回は、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://
Hyperappを読む - Qiita
読んだのでまとめる． Hyperapp とは 2018 年は Hyperapp の年だ を読むとわかる． 読んでみる 読みやすさのために少し書き換えている．実際のコードは GitHub - hyperapp/hyperapp にある． h 関数 h 関数は与えられた引数から Hyperapp の仮想 DOM で使用するノードを生成する．引数に関数を渡すとその関数を実行するようになっているので GitHub - hyperapp/html の関数を渡しても同じようにノードを生成することができる． // { name: 'div', props: {}, children: [] } h( 'div' ) h( 'div', {} ) h( 'div', {}, [] ) // { name: 'div', props: {}, children: [] } import { div } fr
hyperapp使ってみた - Qiita
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`<
新QiitaでReactをやめてhyperappを採用した背景 - Qiita
12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない 学習コスト 仮想 DOM は学ぶ価値のある知識
Hyperapp x TypeScript x Webpack 開発環境構築まで - OITA: Oika's Information Technological Activities
ちょっと話題の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を読み込むためのローダも入れておく。 今回は名前がつよい
Hyperapp & TypeScriptを試す - Adwaysエンジニアブログ
こんにちは、@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
https://github.com/jorgebucaran/hyperapp/blob/fe91524ae43399eac350b65769fa883173bf8818/hyperapp.d.ts
超軽量Viewライブラリ「Hyperapp」の日本語ドキュメント風の何か
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を使う場合 必要なモ
超軽量で学習コストが低い最新JSライブラリー「HyperApp」とは何か
軽量・高速で、シンプルなJavaScriptライブラリー「HyperApp」を紹介。ライブラリーの作者が概要とサンプルを基に使い方を解説します。 複雑なツールを使いこなして優れたWebアプリケーションを構築するのは簡単ではありません。 HyperAppはシンプルさと機能の両立を目的に生まれたJavaScriptライブラリーです。ほかのフレームワークと同水準の機能を維持しながら、理解が必要な概念の数を極限まで削減しました。ReactやPreact、Mithrilと比べると、APIがコンパクトで、ステート管理が標準機能にあり、バンドルサイズが圧倒的に小さいところが特徴です。 HyperAppの概要、サンプルを使ったコードを解説します。ほかのフレームワークの使用経験は不要ですが、HTMLとJavaScriptの基礎知識があることが前提です。 HyperAppとは？ HyperAppはインタラクテ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSX や ES6 記法が苦手な人向けの Hyperapp 入門 - Qiita
イヌでもわかるHyperapp - 犬テトラ+ - BOOTH
Build a To-do List with Hyperapp, the 1KB JS Micro-framework — SitePoint
https://taiyaq.com/contents/PGg8jzP12zX8JtE7LALAdzvOAJ
GitHub - pocka/hyperapp-typescript-demo: hyperapp+Typescript+CSS Modules(SCSS) : Readonly
hyperapp