freee Tech Night #2 の発表資料になります。 https://freee-tech-night.connpass.com/event/122276/ P18, 過去の発表資料はこちら https://speakerdeck.com/tohashi/hurontoendofalsemodanhua-tojavascriptmoziyurufalse-yi-cun-jie-jue https://www.slideshare.net/tkm64/webpack-62692382
freee Tech Night #2 会計freee 7年目のフロントエンド開発
freee Tech Night #2 の発表資料になります。 https://freee-tech-night.connpass.com/event/122276/ P18, 過去の発表資料はこちら https://speakerdeck.com/tohashi/hurontoendofalsemodanhua-tojavascriptmoziyurufalse-yi-cun-jie-jue https://www.slideshare.net/tkm64/webpack-62692382
技術要素編: web アプリが新陳代謝を続けるための依存関係の厳選（新規開発のメモ書きシリーズ1）
新規開発したプロダクトについて ｢世の中に URL は出ているが、まだ正式公開していない｣という微妙な位置付けなのでプロダクト名と詳細は避けつつ述べます。短めの開発期間で急いでつくって、慌てて年末にβ版をリリースしたところです。 次の動きに向けてまったりしたり、Inside Frontend の開催に向けて四苦八苦しているところでメモ書きです。 このシリーズの他の記事はこちら。 ビルド設定編: UA に応じた最適な JS バンドルの配信と webpack との距離感 コード設計編: context による縦軸分類とレイヤードアーキテクチャ アーキテクチャ編: SSR と CDN ( Fastly ) とユーザー依存情報の分離 依存するパッケージの厳選 新しい技術、ライブラリを試すこと、それらを使って生産性の向上にチャレンジすることは必要です。とはいえ、程度が過ぎると逆に生産性を下げかねない
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
import-js で JavaScript の import を自動入力する - Qiita
import-js で JavaScript の import を自動入力する React 等、新しい ES 環境で import を多用する開発を行ってると、クラスや関数を使う度、import に毎回追加、というのが面倒じゃないですか？私はめっちゃ面倒くさかったです。 そんなとき、import-js を使うと、足りない import 文を入力してくれて大変便利です。 https://github.com/Galooshi/import-js fix import で足りない import 文を勝手にプロジェクトのルートや node_modules から探していい感じに入れてくれます。また同じ名前のモジュールが複数ある場合、ダイアログを出してくれます。 また JSX や flow にも対応しているため、<ComponentName /> みたいな JSX タグも import 文に追加して
How we built Twitter Lite
We’re excited to introduce you to Twitter Lite, a Progressive Web App that is available at mobile.twitter.com. Twitter Lite is fast and responsive, uses less data, takes up less storage space, and supports push notifications and offline use in modern browsers. The web is becoming a platform for lightweight apps that can be accessed on-demand, installed without friction, and incrementally updated.
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplate master ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っている frontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っている デフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っている はじめに 最近の JavaScript について 僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。
MobXでReactのステート管理をする - Qiita
MobXはSimple, scalable state management を謳うステート管理マネージャ。 最近Hacker NewsやEchoJSで、にわかにMobXがフィーチャーされている。 3 Reasons why I stopped using React.setState — Medium この記事を読んで、そんなにいいもんかなと思い、試してみることにした。 mobxjs/mobx: Simple, scalable state management. カウンター 簡単なカウンターを作ってみる。一秒で1インクリメンタルされるやつ。 import ReactDOM from "react-dom"; import React from "react"; import {observable} from "mobx"; import {observer} from 'mobx-r
複雑なJavaScriptアプリケーションを考えながら作る話
autoscale: true theme: Plain Jane,5 複雑なJavaScriptアプリケーションを考えながら作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info #jsprimerを書いています JavaScript入門書に興味ある人はウォッチ :star: :warning: 注意 :warning: 作成するアプリケーションによって必要な構造は異なります 今回の話はある程度の規模で複雑性を持つクライアントサイド ライブラリ抜きで数万LOC >= 長期的にメンテンナンスや変更が発生するアプリケーション サーバサイドレンダリングはしないクライアントアプリケーション 3行でOK 複雑なJavaScriptアプリケーションを作るにあたりドメインモデルをどう実装するか悩んだ 色々と試行錯誤した
Immutable App ArchitectureについてのTalkを観た
Render 2016 - Lee Byron from White October on Vimeo. https://vimeo.com/166790294 http://2016.render-conf.com/talks.php#immutable-user-interfaces Dan AbramovもReact EuropeのQ&AでおすすめしていたTalkで、改めて見て面白い内容だったので紹介します。 FacebookがReactやGraphQL、Immutable.jsを使ってどのようなアーキテクチャでアプリケーションを作成しているのかということを解説したTalkです。 特にFluxのような新しい概念が提唱されているわけではありませんが、最近のフロントエンドの流れやFacebookが目指しているものがわかりやすく解説されています。 Architectureの話が中心で各ライ
Read/Write Stack | JavaScriptアーキテクチャ
autoscale: true Read/Write Stack | JavaScriptアーキテクチャ 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info This is Bikeshed.js :bike: 抽象的な話が多いので、実装はコード見て(Pull Request投げて！) これが正しいという話ではないです。 自転車置き場の議論なので！ 中規模以上のJavaScript 設計が必要になる 正しい設計はない Bikeshed.js :bike: 人、目的、何を作るかによってアーキテクチャは異なる 前回の続き? : How to work as a Team 用語 設計の目的 中規模以上のウェブアプリ SPAというよりは、画面が複雑なElectronアプリのようなイメージ スケーラブル 人、機能追加、柔
2015年に向けたJavaScriptアプリケーションアーキテクチャ Part 1 | POSTD
私はかつて自分はアーキテクトだと名乗ったことがあります。これを裏付けるため、今やウソだらけの複雑な話を設計しなくてはならなくなっているので、ある意味これは本当のことですね。冗談はさておき、2015年を目前としてJavaScriptコミュニティのアプリケーションアーキテクチャの状況について目を向けてみるのは有益なことだと思います。合成、関数型の境界、モジュラリティ、不変データ構造、CSPのチャネルと、その他に関連するいくつかのトピックについて書いてみたいと思います。 合成 アーキテクチャのレベルでは、JavaScriptで大規模なアプリケーションを作成する方法に関してここ数年で少なくとも一つの根本的な変更がありました。機械の細かい違いにより生み出される単一指向性の データバインディング、不変データ構造と、仮想DOM （どれも興味深い問題ですね）などを除けば、多くの開発者が一つのキーコンセプト
Hacker News APIがTodoMVC的な場所になってる
Hacker NewsのREST APIとしてHackerNews/APIが公開されました。 このAPIはCORSも対応してるのもあって、TodoMVCのように色々なライブラリでこのAPIを使ったHacker Newsクローンが作られています。 dstaley/realtime-hacker-news Ember.jsとEmberDataを使ったクローン ssorallen/hackernews-react Reactを使ったクローン insin/react-hn Reactとreact-routerを使ったクローン lekoaf/HackerNews AngularJSを使ったクローン yyx990803/vue-hackernews Vue.jsを使ったクローン 等現在進行形で増えていってる気がします。 TodoMVCはいわゆるTODOアプリをデモアプリとして色々なフレームワーク等を使
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
“モダン”ウェブアプリケーション 〜アメブロ5ヶ年計画〜
GitHub - mobxjs/mobx: Simple, scalable state management.
CSSに死を！これはJSerの叫び！ #kbkz_tech