同じようなプロダクションコードおよびテストコードを３回も書きたくない！ Web App : JavaScript iOS App : Swift Android App : Java, Kotlin
FlutterとAngularでModelを再利用
同じようなプロダクションコードおよびテストコードを３回も書きたくない！ Web App : JavaScript iOS App : Swift Android App : Java, Kotlin
An experimental data-flow analysis tool for front-end JavaScript
What is FromJS? FromJS shows you where each value in the DOM comes from. For example, some data might have been loaded using fetch, some might have been stored in localStorage, and some might have been hard-coded in the JavaScript code. Try FromJS I've not worked on this for a while and it never worked super well, so maybe you shouldn't actually try it :) Install from NPM: npm install -g @fromjs/c
すべてをjsにまとめる思想を理解する - webpackハンズオンシリーズ｜こんぴゅ
javascriptの開発では、sassやtypescriptなどのコンパイル、minifyやautoprefixerでの最適化、依存関係を解決しbundleするなど多様な工程があるので、属人化・職人依存を避けるためにタスクランナーでの自動化が昔から当たり前に行われています。 webpackはこの手のツールのデファクトです。webpackはタスクの自動化支援ではなく、なんでもjsにまとめるという仕事をうまくやる事に特化しています。gulpやbrowserifyで行なっていたようなタスクの自動化はnpm scriptで十分やん、という割り切りを感じます。 なんでもjsで扱えるようにするので、cssや画像やhtmlもjs内にロードでき、設定が煩雑になりにくくなります。 webpackのloaderという仕組みがjsへの組み込みや最適化をうまくやってくれるのですが、どういうものか検証していきまし
Goだけで作るフロントエンド
Go のシンタックスだけで HTML とスタイルと JS を構築する「Vecty」というフロントエンド開発キットの紹介 先日 Umeda.go#3 にて登壇して Vecty を紹介しました。資料はこちらです。 Vecty とは？ リポジトリ: https://github.com/gopherjs/vecty GopherJSむけの React-like な frontend development kit です。 GopherJS について 前に書いた紹介記事を参照 Vecty の主な機能は GopherJS の Go 記述を JS へのトランスパイル機能を利用します Go のシンタックスのみで HTML とスタイルとイベントハンドリングを記述 HTML 記述ツリーをコンポーネントとして定義する支援機能 コンポーネントツリーを初期レンダリングする機能 仮想 DOM のようにコンポーネント
You Might Not Need Redux
People often choose Redux before they need it. “What if our app doesn’t scale without it?” Later, developers frown at the indirection Redux introduced to their code. “Why do I have to touch three files to get a simple feature working?” Why indeed! People blame Redux, React, functional programming, immutability, and many other things for their woes, and I understand them. It is natural to compare R
コード設計編: context による縦軸分類とレイヤードアーキテクチャ（新規開発のメモ書きシリーズ3）
流行りの monorepo 風味と DDD 風味？ 今回はコードの設計について書き残します。主に JavaScript 界の話です。Web アプリケーション全体の設計は次回で、今回はコード面の設計に限定して書き留めています。プロダクト全体のアーキテクチャは次の記事で述べる予定ですが大雑把には、メディアっぽいサービスでありつつも SPA + SSR が許容される程度には要件定義の時点でコードの行数がかさむことが約束されたプロダクトです。 今回は大きく分けて下記について述べています ディレクトリ構造 オブジェクトの種類と責務 Flux 的なデータフロー あくまで風味なので今回、専門用語の意味ズレなどは優しくお願いします... このシリーズの他の記事はこちら。 技術要素編: web アプリが新陳代謝を続けるための依存関係の厳選 ビルド設定編: UA に応じた最適な JS バンドルの配信と web
MapboxとGoogle Mapsを比べながらMapboxの本当の素晴らしさを発掘する - Qiita
こんにちは、@nazomikanです。 この投稿はLifull Advent Calenderの1日目の投稿になります。 本記事はざっくり言うとmapboxすごいよって話です。 ※言うまでもなく素晴らしいgoogle maps apiと比較することでmapboxを深掘りするのが目的で、決してgoogle mapsを貶めるつもりの記事ではないことをご理解ください Mapboxとは 地図サービスです。 GoogleMapsと近い感じでJSやnative appのsdkが公開されてていい感じに開発できるやつです。 データソースはopen streatmapになります。 Google Mapsとの違い タイルのレンダリングについて google mapsは地図をサーバサイドレンダリングして256x256の地図タイル画像として配信してタイル上に配置していきます。 一方でmapboxは地理情報のvec
Micro Frontends - extending the microservice idea to frontend development
Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. What are Micro Frontends? The term Micro Frontends first came up in ThoughtWorks Technology Radar at the end of 2016. It extends the concepts of micro services to the frontend world. The current trend is to build a feature-rich and powerful browser application, aka single page
PWAの実装をしてみた - 技術探し
一年以上前の記事なので、コードが古いです。気をつけて読んでください。 PWAとは？ 目的 技術スタック Service Worker PWAのview App Shell Content キャッシュ戦略 読み込みフロー Web App Manifest デザイン FirefoxとChromeしかService Workerないけどどうするの？ ネットワーク 実装 ライブラリ webpack-offline 構成 ファイル ルーティング アセットのインストール API周り SSR 資料 さいごに そういえばPWAの実装したことがなかったなと思ったので少し触ってみた。 PWAとは？ PWA(Progressive Web Apps) インストールが不要で、不安定なネットワークでも素早く起動し、プッシュ通知を可能にします。 また、ホーム画面にアイコンも表示でき、アプリと同様の扱いをすることが可能
コンポーネント時代のi18n
サービスを海外展開したい場合、国際化対応を行う必要性がある。これをi18n対応と呼ぶ。Reactでフロントエンドを構築する場合、i18nのための多くのライブラリがあるが、yahoo製の react-intl が実質デファクトスタンダードだ。react-intlを実際に使っている例として、スター14000超えのReactボイラープレートであるreact-boilerplate やSNSの マストドン がある。 しかし、実際にreact-intlを使うとidの管理が非常に面倒であることがわかる(他すべてのi18nライブラリも同様だが)。react-boilerplateを参考にidの管理を見てみる。 まず、react-boilerplateでは、ディレクトリベースでコンポーネントを管理している。その中で、messages.jsにdefineMessagesを使いidとデフォルトメッセージを定義
もうReactのフォームで消耗したくないので、HoCベースのフォームライブラリを作った - wadackel.me
2017 年。React のフォームに消耗しました。 いくつか良さそうなフォームライブラリはありますが、個人的に満足のいくものが無かったので、とあるプロジェクトで実装したものをベースにしてライブラリにまとめました。 作ったもの react-drip-form という、HoC ベースで React のフォームコンポーネントを構築するライブラリを作りました。元となるコードを書いている時、「さくっとフォームの実装を済ませてゆっくりコーヒーでも飲みてぇ…」という気持ちがかなり高まってたので、コーヒーを連想させる名前にしてみました。 wadackel/react-drip-form https://github.com/wadackel/react-drip-form ドキュメントのページでは、Create React App を使った Quick Start もあるので、さくっと試すことが出来ると
やばい、iOSにネイティブアプリ要らなくなるかも。SafariもPWAに対応する可能性 - Qiita
これ以上は長くなるため後述． Chromeは既に，Safariもようやく 上記の通り，Service WorkersがPWAでも最重要な機能の一つである．Chromeでは既に対応済み． しかしSafariが対応しておらず，世間的にはモチベーションの上がらない状況であった（やちまもその一人である）． Safariにおいて，Service Workersの実装状況 No active development が Under Consideration になったのは2015/12/041のことである． 20ヶ月という永遠とも呼べる時を経て，2017/08/032にようやく In Development となったわけであった． だから何なのか SafariにService Workersの実装がなされると，一気にウェブアプリへの移行が進む可能性が大きい． ブラウザの制約が弱まり，ウェブアプリの不採
アメブロ2017: Isomorphic Web Appの進化編 | CyberAgent Developers Blog
こんにちは、フロントエンドを中心に開発しています、原 (@herablog)です。 昨年10月にアメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~という記事で、アメブロのJavaベースアプリから、Node.js・Reactベースアプリへのリニューアルについてお伝えしました。今回は、より進化した2017年版のWebアプリケーション開発に向けて、その後おこなわれた改善についてお伝えします。 https化 2016年4月に、ameblo.jpのhttps化をおこないました。セキュリティ観点としては当然のこと、SEO効果やブラウザの新しい機能の利用など、https化はWebアプリケーションのクオリティアップには必須といってよいでしょう。 まず、サブドメイン化されたサブシステムのhttps化をおこない、その後アメブロ本体のドメインをhttps化しました。ht
App Shell モデルの素振り（前編）webpack と Workbox を利用した構築
App Shell モデルという設計パターン App Shell モデルは、共通のガワ部分を構成する HTML、CSS、JavaScript をシェルと定義し、その中に入る動的なコンテンツ部分と構造的に分離して扱えるように設計されます。 アプリケーション シェル（App Shell）アーキテクチャは、ネイティブ アプリのように瞬時に、そして確実にユーザーの画面に読み込める Progressive Web App を構築する方法の 1 つです。 アプリの「シェル」とは、ユーザー インターフェースが機能するために必要な最小限の HTML、CSS、JavaScript です。これらをオフラインで使用できるようにキャッシュしておくことで、ユーザーが同じページに再アクセスした際に、瞬時に高いパフォーマンス が発揮されます。つまり App Shell は、ユーザーがアクセスするたびにネットワークからす
SPA + サーバーサイドレンダリング、そのダルさに関する私見
いわゆる SPA + サーバーサイドレンダリングがダルい 唐突ですがおさらいです。 なぜサーバーサイドレンダリング（SSR）が嬉しいかと言えば 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰にやさしい（） 古いブラウザ・低性能マシンにやさしい yahoo/fluxible による SPA + Server Rendering の概観 ::ハブろぐ であり、特に SPA + SSR の文脈においては Universal Architecture による SPA + SSR は、技術的には過渡期の歪なキメラっぽさが拭いきれませんが、昨今の Web フロントエンドにしては珍しくビジネス的な説得力があります。 SSR なのでSNSや検索からの流入による初期表示が速い SPA なので回遊時のページ遷移も速い SSR なので古いブラウザでも CSS
A library for building cross-platform apps - ReactXP
Building on React ReactXP builds on the popular React JS and React Native frameworks. XP means X-Platform Share most of your code between the web, iOS, Android, and Windows. Apps Users Will Love Create great-looking, responsive web pages and mobile apps that feel native. The authors of React use the phrase “learn once, write anywhere”. With React and React Native, your web app can share most its l
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - storybookjs/storybook: Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
アメブロ: Isomprhicアプリケーションのパフォーマンス・チューニング
TwitterによるReactベースのモバイルWebスタックはネイティブのパフォーマンスに匹敵する
Testing Frameworks for Javascript | Write, Run, Debug | Cypress
