12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない 学習コスト 仮想 DOM は学ぶ価値のある知識
この投稿は Increments Advent Calendar 2017 の14日目の記事だよ。Hyperapp という JavaScript ビューライブラリを自作しているので、その説明と作った理由について話す。 Hyperapp ができるまでのプロセスや、どんな価値観で作ったかなどを書く。新しいフレームワークを作る時の参考になれば嬉しい。 Hyperapp とは？ Web アプリのフロントエンド用 JavaScript ライブラリ。React, Preact, Vue といった代表的なものよりもずっと小さく、1 KB という超軽量サイズ。他のライブラリに依存することなく使えて、さらにスピードもある Elmアーキテクチャーに基づいてて、アプリケーション設計はElmやReact、Reduxと似てるけど、ボイラープレートは少ないし、TypeScriptにも対応して、とにかくシンプル。 El
こんにちわ、エンジニアのきむらです。現在は主にフロントエンドを担当しています。 今回は、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://
GitHub - jorgebucaran/hyperapp: 1kB-ish JavaScript framework for building hypertext applications
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
私は脱jQuery(脱DOM操作)したい系の者で、 React, Vue.js, Hyperapp については初心者です。サンプルコードは公開しておりますが、正確さは保証いたしません。この記事は参考程度に読んで頂ければと思います。 作ったもの 以前に React, Vue.js で製作したRaspberry Piの無線LANをmicroSDで簡単に設定するためのツールを Hyperapp でも作ってみました ツールへのリンク: https://mascii.github.io/wpa-supplicant-conf-tool/ このツールはブラウザ上でSSIDとパスフレーズを入力してリストに追加するだけで簡単にRaspberry Piの無線LAN設定ファイル(wpa_supplicant.conf)を作成でき、これをPCでRaspbianの入ったMicroSDに書き込んでおくことでRasp
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を使う場合 必要なモ
Introducing Hyperapp 1.0 🎉
Today, I’m excited to announce Hyperapp 1.0! This milestone means the API has reached stability and the churn is finally over. It took us almost a year to arrive at the current API and while it will never be perfect, done is better than perfect and I am extremely pleased with the result. Thank you, everyone, for contributing your time, your feedback, and your code to Hyperapp! ❤️ What is Hyperapp?
302 hyperapp - JS.ORG
Dedicated to JavaScript and its awesome community since 2015
1. はじめに Hyperappでタスク管理アプリの開発をし、 ある程度理解する事ができたので、思いのままに語ります。 1-1. I love Hyperapp React,Reduxを愛しState管理以外は考えられない私。 2018年、Hyperappと出会いました。 なんというシンプルさでしょう。 まさに、この1KBのソースコードに出会うため 血と汗を流しながらシステムエンジニアを続けてきたと言っても過言ではありません。 React,Reduxの公式ページを頑張って読んでいた頃が懐かしい。 今はHyperappの1KBのソースを何度も読み返すのです。 是非Hyperappについて語り合いましょう。 1-2. 基本的な考え方を知っておく State管理が基本です。 先ず、State管理によるDOM更新を考えた天才に、改めて拍手を送りたい👏 おかげで本当に楽しくコーディングが出来るよう
Who? ジョージ エンジニア at Qiita＋Increments @jbucaran GitHub Twitter Qiita jbucaran.hatenablog.com 今まで作ってきた OSS は？ fly – Generator & Coroutine-based build system. fisherman – A concurrent plugin manager for fish. hyperapp – 1kb JavaScript library for building frontend applications. アジェンダ What is hyperapp? GitHub Documentation Examples Why hyperapp? How does it work? Differences with other libraries What n
Hyperappとは Hyperapp GitHub ページ GitHub - hyperapp/hyperapp: 1 KB JavaScript library for building frontend applications. Web アプリのフロントエンド用 JavaScript ライブラリ。React, Preact, Vue といった代表的なものよりもずっと小さく、1 KB という超軽量サイズ。他のライブラリに依存することなく使えて、さらにスピードもある Elmアーキテクチャーに基づいてて、アプリケーション設計はElmやReact、Reduxと似てるけど、ボイラープレートは少ないし、TypeScriptにも対応して、とにかくシンプル。 2018 年は Hyperapp の年だ - Qiita 実装サンプル hyperapp/hello-world.md at master
軽量・高速で、シンプルなJavaScriptライブラリー「HyperApp」を紹介。ライブラリーの作者が概要とサンプルを基に使い方を解説します。 複雑なツールを使いこなして優れたWebアプリケーションを構築するのは簡単ではありません。 HyperAppはシンプルさと機能の両立を目的に生まれたJavaScriptライブラリーです。ほかのフレームワークと同水準の機能を維持しながら、理解が必要な概念の数を極限まで削減しました。ReactやPreact、Mithrilと比べると、APIがコンパクトで、ステート管理が標準機能にあり、バンドルサイズが圧倒的に小さいところが特徴です。 HyperAppの概要、サンプルを使ったコードを解説します。ほかのフレームワークの使用経験は不要ですが、HTMLとJavaScriptの基礎知識があることが前提です。 HyperAppとは？ HyperAppはインタラクテ
Hyperapp for Redux refugees
How I learned to stop worrying and love the function Feb 14th, 2018 · 16 min read I love Redux. It was my gateway to functional programming, and the first such code I ever put into production. Gone were the days of using the DOM for storing your application state and precariously manipulating it with jQuery. Redux provides a tidy state management solution that lives entirely apart from your view.
こんにちは。毎日あったかくなって来ましたね。僕は暑い国から来たけど、実は暑いのは苦手。今の季節は最高に気持ちがいいね。 日本に住む外国人エンジニアの僕だけど、最近いくつか嬉しいことがあった。 Hyperappの紹介記事が掲載されました この前、こちらのサイトがHyperappを紹介してくれました！ @bl6さん、ありがとうございます！！ MOONGIFTさんの記事に続いて、多分2つめの日本語記事だと思う。 英語での記事はいくつかあるんだけど、日本語での記事を見ると特に嬉しいなあと思う。 自分の作ったものを使ってもらえるのはとても幸せなことだ。その中でも特に、日本のエンジニアに使ってもらうのはすごく嬉しい。だって僕は日本が好きだからね。 それに、ネイティブじゃない言葉で技術的なアウトプットするのは大変。勉強会では日本語でトークしたりしてるけど、まだまだ勉強が必要。 とにかくありがとう！！感謝
こんにちは、あんはるです。 Flask + HyperappでTodoアプリを作りました Flaskとは？ Python製の軽量Webアプリケーションフレームワーク。RubyでいうSinatraみたいなもの。 Hyperappとは？ 1 KBという超軽量のフロントエンドのフレームワーク。 とてもシンプルなのですぐに理解することができ、使いやすい。 QiitaのフロントエンドにHyperappが採用されたことから話題になる。 なぜ、Flask + Hyperappか。 Flaskは機械学習モデルをWebAPIにするのによく使われています。 今、機械学習もやっていてプロトタイプとして機械学習モデルをWebAPIにしてみようと思っているので、 Flaskを使う練習としてFlaskを使おうと思いました。 Hyperappは、HyperappでWebAPIからデータを取得したりする処理をしてみたかっ
HyperApp - 1KBのビューライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ReactやVue、Riot.js、Angular2などバーチャルDOMを使ったフレームワークが増えています。個人的にはVueが好きなのですが、多くのビューライブラリは大型化し、ちょっとした表示に使いたいというニーズにはマッチしなくなります。 そこで使ってみたいのがHyperAppです。1KBのJavaScriptライブラリと銘打ったビューライブラリです。 HyperAppの使い方 ごく基本的な使い方は次のようになります。modelとviewが基本になります。 app({ model: "Hi.", view: model => <h1>{model}</h1> }) ボタンを押した時のアクションを定義する場合は次のようにreducersを定義します。 app({ model: 0
Hyperappは、JavaScript製のミニマルで関数型パラダイムを利用したGUIアーキテクチャと状態管理機構を備えた、フロントエンドアプリケーション構築ライブラリです。私が初めて、このライブラリを知ったのは先日、新QiitaでReactをやめてhyperappを採用した背景という記事で見かけたからでした。その記事で、いくつか気になった点があったことへの言及と自分なりにフロントエンドアプリケーション開発における言語・フレームワーク・ライブラリに対するスタンス、それを踏まえてHyperappとは、どのようなライブラリなのかについて説明できたらと思います。結論から言うとHyperappは素晴らしいものでした。それ故に何が素晴らしいのかを良く考える必要があると思いました。 先日の記事で気になった点 それでは、まず気になった点について言及していきます。記事全体に関しては、まだ完全に噛み砕けてい
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
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に興味を持ったので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 Architecture. C
Who? ジョージ エンジニア at Qiita＋Increments @JorgeBucaran GitHub Twitter Qiita jbucaran.hatenablog.com 今まで作ってきた OSS は？ fly – Generator & Coroutine-based build system. fisherman – A concurrent plugin manager for fish. hyperapp – 1KB JavaScript library for building frontend applications. アジェンダ What is Hyperapp? GitHub Documentation Examples Why Hyperapp? How does it work? Differences with other libraries Wh
I kinda feel like a traitor given my pretty long history with Vue and React, but I think I have a new go-to frontend framework. Hyperapp is everything that I wanted Elm to be -- it's easy to build code with, highly organized, and state is handled flawlessly. That being said, it's not as production ready as the aforementioned frameworks, but once it is I can see it being huge. Let's start with zero
HyperAppは、フロントエンドアプリケーションを構築するための1KBの軽量なJSライブラリです。簡単に言えば、WEBアプリケーションで比較的よく見られるドラッグやクリック、入力などのコンテンツを実装する場合に役に立つライブラリです。シンプルなものであれば、HyperAppの使用のみで実装が可能です。 こちらのライブラリは、1KBと非常に軽量なのも嬉しい特徴のひとつです。また、他のライブラリには依存していません。それでは、HyperAppについて詳しく見ていきましょう。 HyperAppの実際のデモは以下のページから確認できます。 デモ HyperAppで、例として紹介されているコンテンツには下記のようなものがあります。 クリック数 カウンター ドラッグ ログ スライダー クロック（秒針が自動で動く） クロック（現時間の自動表示） ToDoリスト 上記を含め全18タイプの例が紹介されてい
hyperappとは ReactやVueと同じく、フロントエンド用のビューライブラリ。同じく、と書いたがソースコードのサイズが合計1KBとなっており先に述べたフレームワークと比べかなり軽量・シンプルなつくりになっている。 のでその気になればソースを全て読んで内部の挙動を把握したうえで使うことができる。 詳細については開発者さんが記事を書いているのでそちらを参照。 2018 年は Hyperapp の年だ - Qiita GitHubはこちら GitHub - hyperapp/hyperapp: 1 KB JavaScript library for building frontend applications. またソースコードを解説している記事もあるのでそちらも読んでおくと理解が深まる。 Hyperapp のソースコードを読む 簡単なTODOアプリやカウンターを実装したものが公開されて
Hyperapp + Parcel = 😎
Simple & nimble frontend duo that kills the JavaScript fatigue In this post, we’ll have a closer look at two new tools in the front-end world. They are both developed with simplicity and ease of use in mind. First one is a tiny frontend framework called Hyperapp, the second is an asset bundler by the name of Parcel. Together they might be the best way to quickly and pleasantly build a decent light
HYPERAPPはWebアプリ開発を少しだけサポートしてくれるJSライブラリです。本ライブラリではクリック数検知やカラーコードのパース、要素のドラッグ&ドロップ、キーワードマッチ、マウスの動きの解析やTodo、時計などWebアプリで割と使われるコンテンツを実装出来ます。他ライブラリに依存していません。軽くていいですね。ライセンスはMIT。 HYPERAPP
iTunes - Podcast - hyperapp「ハイパーアプリクリエイターズ - クリエイター・開発者の皆さんに、iPhoneアプリの作り方をイ」
iTunes Store を開いています。iTunes が開かない場合は、Dock または Windows デスクトップで iTunes アイコンをクリックしてください。進捗インジケータ iTunes はデジタルメディアのコレクションの管理、追加がとても簡単に行えるツールです。 お使いのコンピュータで iTunes が見つかりません。 hyperapp のハイパーアプリクリエイターズ - クリエイター・開発者の皆さんに、iPhoneアプリの作り方をイをダウンロード、購読するには、iTunes を入手してください。
2018/03/30 We Are JavaScripters!@17thの発表資料です
For a while now, JavaScript and its ecosystem have been thriving. From different tooling categories, UI frameworks have enjoyed immense popularity. New libraries and frameworks seem to pop up almost every day, while Vue, React, and Angular persistently lead the way. From these new options, there are some that deserve your attention. I’m thinking Svelte, Solid, and Hyperapp - an ultra-lightweight U
Hyperapp: The 1 KB JavaScript Library for Building Front-End Apps
Hyperapp is a JavaScript library for building feature-rich web applications. It combines a pragmatic Elm-inspired approach to state management with a VDOM engine that supports keyed updates & lifecycle events — all without dependencies. Give or take a few bytes, the entire source code minified and gzipped sits at around 1 KB. In this tutorial, I’ll introduce you to Hyperapp and walk you through a
hyperapp/getting-started.md at master · hyperapp/hyperapp · GitHub
Getting Started Hello World Installation Usage Build Pipeline Hello World Let's begin with the simplest of all programs. Paste the following code in a new html file and open it in your browser. Or try it online . < body > < script src = " https://unpkg.com/hyperapp " ></ script > < script > const { h , app } = hyperapp app ({ state : " Hi. " , view : state => h ( " h1 " , null , state) }) < / scri
Hyperapp V2を使いたいけど公式ルーターがない！でも欲しい！！ということで自作しました。TypeScriptで書いています。型定義はこちら。 サンプル JavaScriptにしたサンプル https://codesandbox.io/embed/zkml2q59j3 router.ts import { h, SubscriptionEffectRunner, SubscriptionEffect, VNode, DispatchType, Effect, Action } from "hyperapp"; export interface RouterProps { routes: Route[], matched: (route: Route | undefined, dispatch: DispatchType<any, any, any>) => void, } expor
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`<
GitHub - jorgebucaran/hyperawesome: A curated list of awesome projects built with Hyperapp + more
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Talker: Jorge Bucaran (ジョージ) https://twitter.com/jbucaran https://jbucaran.hatenablog.com --- Y8 2017 spring in Shibuya ちいさめなIT系ならなんでもありカンファレンス！ http://y8-2017-spring.hachiojipm.org/
こんにちは、@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
Reddit Voting UIMany beginners may wonder what the purpose of SPA (Single Page Application) libraries/frameworks is. Why can’t they just use plain old JavaScript since it can achieve the same thing without the bloat? What is the purpose of them, and why are they so hyped up? In their very essence, these libraries are designed to make building interactive web applications easier. Users frequently i
hyperappを使って公式に載っているごく簡単なカウンターアプリを作りました。 開発環境の構築 フロントエンドわからないマン（reactの本と公式チュートリアル１周した程度）なのでとにかく楽に導入できる方法を選択しました。 # 作業フォルダの設定 PS> mkdir try-hyperapp PS> cd try-hyperapp # package.jsonの作成 PS> yarn init -y # Hyperappのインストール # babel-preset-envのインストール（環境に合わせてトランスパイルしてくれる？） # parcelのインストール（設定ファイルのいらないモジュールバンドラー） PS> yarn add hyperapp babel-preset-env parcel-bundler
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新QiitaでReactをやめてhyperappを採用した背景 - Qiita
2018 年は Hyperapp の年だ - Qiita
SHOWROOMの新規開発にHyperappを採用した話 - SHOWROOM Tech Blog
Hyperapp, React, Vue.jsで同じサンプルアプリを作ってサイズを比較してみた - Qiita
超軽量Viewライブラリ「Hyperapp」の日本語ドキュメント風の何か
Hyperappを理解する - Qiita
hyperapp – 1kbのビューライブラリ - Qiita
Hyperapp のソースコードを読む - Qiita
超軽量で学習コストが低い最新JSライブラリー「HyperApp」とは何か
Hyperappの紹介記事が掲載されました - JorgeBucaranのblog
Flask + Hyperappで楽しくTodoアプリを作ってみた - Qiita
Hyperappの良さとは何か考えてみた - Qiita
Hyperapp & Typescriptを試す - 🎶爆音駆動開発🎶
Hyperapp — 1 KBのビューライブラリ - Qiita
Functional Programming in JavaScript with Hyperapp
フロントエンドアプリケーションを構築するためのJSライブラリ「HyperApp」 – bl6.jp
hyperappでコンポーネント分割したサンプルアプリを作る - Qiita
Webアプリケーション開発を少しだけサポートするJavaScriptライブラリ・「HYPERAPP」
HyperappでMarkdownエディタを作って薄い本を書きたい
Hyperapp – Is It the Lightweight 'React Killer'?
Hyperapp V2 のルーターを自作する - Qiita
hyperapp – 1kbのビューライブラリ by Jorge Bucaran (ジョージ)
TypeScriptでHyperappを書く - log.pocka.io
Hyperapp & TypeScriptを試す - Adwaysエンジニアブログ
Reddit’s Voting UI in Vanilla vs React vs Vue vs Hyperapp: shedding light on the purpose of…
フロントエンド初心者がHyperappに触れてみる - Qiita