Kyoto.js 13の発表資料です
一年以上前の記事なので、コードが古いです。気をつけて読んでください。 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) インストールが不要で、不安定なネットワークでも素早く起動し、プッシュ通知を可能にします。 また、ホーム画面にアイコンも表示でき、アプリと同様の扱いをすることが可能
普通にwebpackと@babel/preset-envで"last 2 versions", "Safari 10"をターゲットにしてビルドしているだけ
個人の意見 aka ポエムです。 界隈的には今さら感がすごいけど。 そんな今さらポエった事情としては、 とある案件でSPAをReactで作りつつサーバーサイドレンダリング(以下SSR)をすることになるかも SPAじゃないページもまとめてReactでSSRすることになるかも ただ個人的にはSPA+SSR不要論者 サーバーサイドのテンプレートとしてのReactも冗長なだけやろ派 でも仕事なのでしゃーない(お客様がそう申されるなら・・ なのでやるからには再考察してみて、前向きにやれる要素を見つけたい! けどどんだけ考えてもやっぱり意義が見つけられなーい( ´Д`)=3 という感じで、SSR自体の是非はまあどうでもよくて、ただ個人的に「しなくていい」と思ってる気持ちをまとめたものです。 技術に是も非もないです。大事なのはどう使うかなのです。 ちなみにやってみた結果・・とかいう話ではなく、やってない
Redux isn't slow, you're just doing it wrong - An optimization guide It's not very obvious how to optimize react applications that use Redux. But it's actually fairly straightforward. Here's a short guide, along with a few examples. When optimizing applications that use Redux with react, I often hear people saying that Redux is slow. In 99% of cases, the cause for bad performance (this goes for an
本稿は、JavaScriptのテストについて最も重要な根拠、用語、ツール、アプローチなどの知識を身に着けることを目的とした簡略版ガイドブックです。本稿で検討する数々の側面に関する最新の秀逸な記事も紹介しつつ、私たちが経験的に得たことも多少付け加えたいと思います。 Facebookによるテスト用フレームワークであるJestのロゴをご覧ください。 見てお分かりのように、このフレームワークは「苦痛のない」JavaScriptのテストをスローガンに掲げています。しかし、 “次のように言う人” もいます。 苦痛のないテストなんてあり得ない。 実際、Facebookはこのスローガンを掲げるだけの素晴らしい理由があります。一般的にJSのデベロッパは Webサイトのテストにあまり満足していません 。JSのテストには制限があり、実装が難しく、低速である傾向があります。 一方、正しい戦略を立てて適切にツールを
自己紹介 nasum github: https://github.com/nasum twitter: https://twitter.com/tomato360 主にRubyとかRailsで仕事しています 趣味でVue.jsを使っています 今日話すこと Transitionの話 Transitionを使うとアプリがいい感じになる(個人調べ)話 自分で作っているTwitterクライアントをベースに紹介 https://github.com/nasum/twish Transitionの基本 詳しくは公式ガイドを見るのが一番早い https://jp.vuejs.org/v2/guide/transitions.html 今日お話するのはCSS transition を使った例 簡単な例 動的に動かしたい要素をtransitionコンポーネントで囲む v-if での要素の表示・非表示に連動
こんにちは、フロントエンドを中心に開発しています、原 (@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
某所で使った資料の公開版 用語整理 PWA: ネイティブアプリのようなUXを提供するための機能群 SPA: JSで遷移するシングルページアプリケーション AMP: 後述 PWAMP: AMPで流入させてPWAを起動する形式 MFI: モバイルファーストインデックス いまさら聞けないPWAとAMP アメブロ2017: Isomorphic Web Appの進化編 AMP とは イニシャルビューのためのHTMLの特殊なサブセット GoogleにホワイトリストされたHTML属性しか使えない GoogleにホワイトリストされたJSプラグインしか使えない CSSはHEADに全部書く AMP仕様を満たすと、Googleがキャッシュして、モバイルの検索流入ではそのキャッシュを使う HTTPS必須 必ずしも全ページをAMPに対応する必要はない PWA: ServiceWorker の機能 リソースの先読み
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。エンジニアの穴井(@pirosikick)です。去年の10月よりヤフー黒帯制度にて、JavaScriptの黒帯をやっています。普段はヤフーの社内ベンチャー制度からできたリッチラボで福岡で働いていますが、ご飯がおいしすぎて太りました。痩せたい! ここからが本題ですが、今月24日発売されましたWEB+DB PRESS vol.99より、ヤフーのフロントエンドエンジニアによる連載が始まりました!連載タイトルは「どんとこい!フロントエンド開発」です。ヤフーのフロントエンドエンジニアで、流れの速いWebフロントエンドで使われる技術を分かりやすく解説していきますので、どうぞよろしくお願いします! 初回は「入門webpack2」を寄
第一線で活躍を続ける有名エンジニア。彼らが名を上げたのは高い技術力だけでなく、それをどう活用するのか、といった思考力や発想力、さらに数ある困難の克服を可能にしたマインドセットによる部分も大きいことでしょう。本シリーズでは、そんな「有名エンジニアたちの頭の中」をご紹介。 第1回目は、Node.js日本ユーザーグループ代表で、コミッターとしても活動するリクルートテクノロジーズの古川陽介さん。古川さんが日本トップクラスのJavaScriptエンジニアとして、また一ビジネスパーソンとしてオンタイムにどんなことを考え、心がけているのか、その仕事脳に迫りました。 JavaScript案件を提案してもらう 古川陽介(ふるかわ ようすけ) 大学院を卒業後、有名複合機メーカー、大手携帯ゲーム会社を経て、2016年5月リクルートテクノロジーズ入社。現在はグループマネージャーとしてメンバーの教育を始め、Webア
25時限目に引き続きオーガナイザーをしました about_hiroppy です。 今回の26時限目は、150人来ていただき本当に楽しく勉強になる時間でした。 改めてありがとうございました。 また、メルカリさんには会場整理、食事様々なことを手伝っていただき感謝します。ありがとうございました。 さて、今回の勉強会ですが、各フレームワークの話や型の話、低レイヤーのモジュールの話、 Chunked Encodingの話と結構コアな話が多い印象を受けました。 また懇親会では、古川さんからNode Collaboration Summit(Nodeのコアな人が集まるサミット(自分はこの回は行ってないです))やJSConf EU 2017で上がった議題の話がありました。(主にv8の最適化の話) 自分のwbepack3の発表を期待していた方はスミマセン(資料作ってなくて発表できなかったので。。。) 特に、
A very quick introduction to dependent type and its usage in TypeScript
6月17日に ng-japan 2017を開催しました。17人のスピーカーと5社のスポンサー、そして200人以上の参加者のみなさんのおかげで、今年も素晴らしいイベントにすることができました。本当にありがとうございました。 コンセプト 今年のng-japanは「Webのお祭り」というコンセプトで準備を進めました。AngularだけではなくAngularを取り巻く周辺技術についてのセッションを多く採用して、Angular Wayではなく、Webの一員としてのAngularという視点を重視しましたが、いかがだったでしょうか? また、今年は第3回目のng-japanで、2年ぶりにAngularコアチームのメンバーを招いての開催になりました。さらに海外からもスピーカーを迎えたことで、いままでよりも国際色を強めたng-japanになりました。 海外のスピーカーを5人も迎えることになり、通訳を用意するか
はじめに 2017年6月17日(土)にng-japan 2017が開催されました。 その中でセッションに使用された資料が様々な場所で公開されていたので僭越ながらまとめさせていただきました。 公式 http://ngjapan.org ライブ配信(アーカイブ) ng-japan 2017ではライブ配信が行われていました。各セッションは以下のURLで視聴できます。 トラックA - https://www.youtube.com/watch?v=LbnLSD2pL18 トラックB - https://www.youtube.com/watch?v=P1X40cddHGU ご視聴ありがとうございました。ng-japan 2017のライブ配信を終了しました。 同じURLでアーカイブを見ることができますので、ブログ執筆や復習にご利用くださいhttps://t.co/7TraPhYohOhttps://
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く