Edge Side Frontend という新領域
at #ワインと鍋js なぜフロントエンドに Edge Worker が必要なのか、Cloudflare Workers をどう使っていくかみたいな話をしました
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
at #ワインと鍋js なぜフロントエンドに Edge Worker が必要なのか、Cloudflare Workers をどう使っていくかみたいな話をしました
Front-End Study #1「Cloud Native時代のフロントエンド」 - connpass の発表内容のテキスト版です。 発表に載せられなかった参考資料集 StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share The "Developer Experience" Bait-and-Switch - Infrequently Noted JavaScriptよ。文明を捨て、自然に還れ。 ::ハブろぐ Deno - A secure runtime for JavaScript and TypeScript Rome Toolchain Blitz.js - The Fullstack React Framework | Blitz.js ⚡️ Prisma - Da
Cloudflare Workers それは Frontend / Node.js が CDN Edge Side まで拡張されるもの
最近は Cloudflare Workers が熱くて、週末はずっとその調査しています。この記事はそのまとめです。 注意点として、手元でいろいろなパターンで動かして試してはいますが、プロダクション環境で運用したわけではないです。それを踏まえた上でお読みください。 特に断りが無い限り、引用文は DeepL で翻訳したものです。 Cloudflare Workers とはなにか Cloudflare Workers | サーバーレスコンピューティング | Cloudflare 一言でいうなら 「ServiceWorker の API が CDN Edge 上で動く JavaScript 処理系」 です。 Technology Radar では、まだ ASSESS(調査) フェーズという扱いです。 Cloudflare Workers | Technology Radar | ThoughtWo
あなたのパフォーマンスを倍にする Frontend Ops はいかがですか.md あなたのプロジェクトに Frontend Ops を。 [経営者の方へ] ウェブサイトが遅くなっていませんか?機能追加が遅くなっていませんか？ 私 @mizchi は Node.js とフロントエンドのエキスパートです。もし私を知らなければ、御社のフロントエンド担当に mizchi とは誰か聞いてみてください。それが一番早いと思います。 Frontend Ops の専門家として御社のプロダクトの改善にご協力します。 Frontend Ops は、ウェブサイトのロード時間を改善したり、開発者の基盤に手を入れることで一日に何度機能を追加できるかという指標に貢献するロールです。その結果としてUXを改善し、ビジネスを前進させます。 成果報酬で、費用はざっくり 100万円*達成率 となります。(詳細は後述) 弁護士作成
【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。 最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。 パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。 環境 以前の記事でご紹介したとおり、LINE証券のフロントエンドはTyp
GitHub - webui-dev/webui: Use any web browser as GUI, with your preferred language in the backend and HTML5 in the frontend, all in a lightweight portable lib.
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
こちらはDEV Communityに2021年9月2日に投稿され、現在反響を巻き起こしているフロントエンドにおけるクリーンアーキテクチャの実装についてのAlexさんの記事になります（原文はこちら)(twitterにて翻訳掲載許可取得済み）。 かなり大ボリュームな超大作記事となっておりますが、Reactなどを使ったフロントエンドプロジェクトのディレクトリー構成やファイルごとの責務の切り分けのベストプラクティスなどの決定版といえるものがまだまだ出てこない中で、個人的にまさに待ち侘びていたような内容の記事かと思い、是非日本のフロントエンドコミュニティでも知見が共有されればと思いました。 それでは以下、本文です。 *翻訳は大部分をDeepL翻訳によって行っていますが、適宜修正してあります。 少し前に、私はフロントエンドにおけるクリーンアーキテクチャについての講演を行いました。この記事では、その講演
デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture
フロントエンドカンファレンス北海道でお話ししたスライドです Proposal: https://fortee.jp/frontend-conf-hokkaido-2024/proposal/ebd98e0a-241c-4443-aa98-300af113b40d # URL YouTube…
HotwireとNext.jsをちゃんと見て比較しよう#本サイトでは、React/Next.jsに詳しいフロントエンドエンジニアを対象に、実際に動くコードと実際に動くデモを体感しながら HotwireとReact/Next.jsを比較します。 各技術でのUIの作り方を伝えるだけでなく、さまざまな状況での動きを確認していただくために、仕組みや限界も紹介します。そのため、かなり細部の議論もしています。 HotwireでもNext.jsと同等か、それ以上のUI/UXが実現できます。「Hotwireは簡単だけど、React/Next.jsの方が優れたUI/UXが作れる」というのは、かなり特殊なものでない限りは誤解ですHotwireはバックエンド非依存です。Rails, Laravel, Django, Go, Nodeでも関係なく動きます。実際、本サイトのHotwireコードはNext.js AP
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
Clean Architectureを採用したBackend For Frontendの開発とこれまでの所感 - LIFULL Creators Blog
こんにちは。テクノロジー本部のyoshikawaです。好きなLinux DistributionはManjaro Linuxです。 今回はレガシー化が進むLIFULLのメインサービスの開発効率の向上とコードベースの健全性の確保をすべく、Clean Architectureを採用しバックエンドを刷新している取り組みについて紹介させていただきます。 なお、Clean Architecture自体の説明および解説は本記事では行いません。 背景：歴史あるバックエンドの刷新 アプローチ：新たなアーキテクチャと共創 採用したアーキテクチャ・技術 Clean Architectureを採用した理由 TypeScriptを採用した理由 LoopBackを採用した理由 Clean Architectureの実践 レイヤー分け：例の図と新BFFアーキテクチャのレイヤーとのマッピング レイヤー内・レイヤー間：独
Alex Bespoyasov Posted on Sep 1, 2021 • Updated on May 12, 2022 • Originally published at bespoyasov.me Not very long ago I gave a talk about the clean architecture on frontend. In this post I'm outlining that talk and expanding it a bit. I'll put links here to all sorts of useful stuff that will come in handy as you read: The Public Talk Slides for the Talk The source code for the application we'
サイボウズが行うフロントエンドの品質保証 / Frontend Quality Assurance at Cybozu
フロントエンドエキスパートを中心に開発支援チームによるサイボウズのフロントエンドの品質保証に対する活動を発表しました。 質問・感想など: https://twitter.com/shisama_ 発表したイベント: 【オンライン】SaaSを支える品質担保術/レガシーコード、アーキテクチャ…
buildkit/frontend/dockerfile/docs/syntax.md at dockerfile/1.4.3 · moby/buildkit
BuildKit supports loading frontends dynamically from container images. Images for Dockerfile frontends are available at docker/dockerfile repository. To use the external frontend, the first line of your Dockerfile needs to be # syntax=docker/dockerfile:1.3 pointing to the specific image you want to use. BuildKit also ships with Dockerfile frontend builtin but it is recommended to use an external i
こんにちは。LINEフィナンシャル開発センター フロントエンドエンジニアの峯です。 先日新卒としてLINE証券プロジェクトに配属となり、最初のタスクとしてRecoilによる状態管理の導入に取り組みました。 その際、なぜRecoilにしたのか、また本番開発にRecoilを使うにあたって設計に気をつけたことなどを本記事でご紹介しようと思います。 技術選定 いままでの状態と課題 LINE証券フロントエンドではReact+Typescriptによる開発を採用しており、いままでのグローバルな状態管理にはUnstated を用いていました。 Unstatedでは Container classを状態の単位とし、その内部の stateを setState によって更新します。状態を使用したいコンポーネント側では、<Subscribe> コンポーネントによって情報を読み出すことができます。 一方ご存知の通
The goal for the State of Frontend is still the same – we want to see the real day-to-day perspective from frontend professionals of all levels and backgrounds. Inside you’ll find answers to which technologies we love to hate but still use, which practices are sacred and which are neglected, and what future people see for themselves and the frontend landscape. We’re excited to see a varied represe
Next.jsと比較しながらHotwireを理解するサイト: "Hotwire for Frontend Developers"
ここ３ヶ月間ほど、"Hotwire for Frontend Developers"「フロントエンドエンジニアのためのHotwire入門」というウェブサイトを作っていました。（ベータ版として公開していました） HotwireとNext.jsをちゃんと見てから比較してもらいたいというのが最大の目的で、同じUIをHotwireのとNext.jsで作成し、デモを動かしたり、コードを見たりしながら比較してもらおうというのが主旨です。同じUIをNext.jsのPages RouterとApp Routerで作っているものもありますので、この比較もできます。 結構コンテンツが多いので、Zennではこれから少しずつ内容も紹介していきたいと思います。 まずはご覧ください！ "Hotwire for Frontend Developers"
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。 以前の記事でご紹介した通り、LINE証券ではReactを使用しています。React 16.8で導入されたフックの機能は非常に革新的で、特にカスタムフックの概念によってReactにおけるコンポーネント設計は大きく様変わりしました。我々もフック時代のコンポーネント設計を試行錯誤しており、その結果はLINE証券にも反映されています。 この記事では、その中でも我々が最近ハマっている「カスタムフックを通じてコンポーネントを提供する」という、いわば“render hooks”とも言うべき設計パターンを紹介します。 今回のお題 今回は、「いくつかのチェックボックスがあり、全部チェックを入れると次に進める」という典型的なパターンを題材にしましょう。次の画像では3つのチェックボックスと「次へ」ボタンが並んでおり
Build smaller, faster, and more secure desktop applications with a web frontend | Tauri Apps
Build an optimized, secure, and frontend-independent application for multi-platform deployment.
これはなにか cloudflare スタックを使ったマイクロフロントエンドの提案。 特に service-binding を活用することで異なるサービス(ここでは cloudflare worker)から配信されるフロントエンドを統一的にSSRしつつ、開発単位を分離している。 RTT最適化のために qwik で書かれているが、SSR を意識しなければ他のライブラリを採用しても良い。 $ tree . -I node_modules . ├── README.md ├── body │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── Body.css │ │ ├── entry.ssr.tsx │ │ └── root.tsx │ ├── tsconfig.json │ ├── vite.config.t
こんにちは。フィナンシャル開発センターWeb開発室の鈴木です。Web開発室は現在「LINE証券」のフロントエンドを担当しています。【LINE証券 FrontEnd】 シリーズでは、Web開発室メンバーがLINE証券のフロントエンドにまつわる様々なトピックや、LINE証券の開発中に得た知見をお届けします。今回は第1回ということで、LINE証券のフロントエンドの全体像を説明します。LINE証券というアプリがどんな技術で動いているのか、そして技術に対する考え方を知ることで、LINE証券をより身近に感じていただけると幸いです。 TypeScript + React LINE証券は、いわゆるSPAとして作られています。最近のSPA開発で最初に決めることといえば、1に言語、2にViewライブラリですね。見出しにすでに出ていますが、LINE証券ではプログラミング言語としてTypeScriptを、ライブラ
フロントエンド開発者も知っておきたい�AWS Lambda とサーバーレス / Serverless for frontend developers
Front-End Study #1「Cloud Native時代のフロントエンド」での登壇資料です。
我が Design-Frontend Ops論〜フロントエンド開発を加速するためのデザイン - 仮説編〜｜seya
やはりデザイナーがアレだとフロントエンドエンジニアの生産性も著しく下がり、逆に良ければ上げることもできると思うので、自分が考えてる「デザインの側面からフロントエンドの生産性を考える」というのは割と筋がいいアプローチなのではという想いが深まった — フロントエンド大好きseyaさん (@sekikazu01) June 15, 2021 思いの外反響があり、もっと具体的に聞いてみたい・ディスカッションしてみたいというお声をいくつかいただきました。 せっかくの機会なので、現状自分が考えるデザインとフロントエンドの接合の最適化、カッコ良くいうと「Design-Frontend Ops論」を語っていこうかなと思います。 ※ 予防線貼っておくと、まだ全然実践できていないので話半分に聞いてください。タイトルに"仮説編"とついているのはそのためです。 ※ 一緒に探求してくれる気概あふれるデザイナーも募集
チャリティーカンファレンス沖縄2020 フロントエンド編の資料です。 https://charity-conf.okinawa.jp/
みなさん、ブラウザ内で TypeScript が直接動いてくれたらいいなぁ、と思ったことはありませんか？ しました。 これができます。 どのようにうごいてるか Service Worker は合法 MITM とも言えて、 fetch 時のリクエストを好きに書き換えることができます。 開発時 初回インストール時に Service Worker をインストール コンパイラを内蔵した Service Worker がリクエストの拡張子に応じて js に書き換える Content-Type: text/javascript として SW でキャッシュして返却 TypeScript(.ts, .tsx) と Svelte(.svelte + preprocess) に対応 WebSocket サーバーを起動。ファイル変更を監視して、変更されたファイル名をブラウザに通知 変更されたファイルを Serv
フロントエンドの Monorepo をやめてリポジトリ分割したワケ / Why did we stop using Monorepo on the frontend and split the repository?
2024/06/25： モノレポは、令和のソフトウェア開発における銀の弾丸か？ https://hack-at-delta.connpass.com/event/319792/ フロントエンドの Monorepo をやめてリポジトリ分割したワケ 坂井 学 ソフトウェアエンジニア
GitHub - adobe/frontend-regression-validator: Visual regression tool used to compare baseline and updated instances of a website in a deployment pipeline.
FRED is an opensource visual regression tool used to compare two instances of a website. FRED is responsible for automatic visual regression testing, with the purpose of ensuring that functionality is not broken by comparing a current(baseline) and an updated version of a website. FRED compares the following: Console and network logs Visual: screenshot analysis Visual AI: screenshot analysis using
Build complete frontend features, even if your API doesn't exist. Mirage JS is an API mocking library that lets you build, test and share a complete working JavaScript application without having to rely on any backend services.
GitHub - vitejs/vite: Next generation frontend tooling. It's fast!
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
Build an optimized, secure, and frontend-independent application for multi-platform deployment.
TDD in a React frontend
2021-01-19 React, tddTDD in a React frontendNowadays, only a few professional developers are left that seriously doubt the value of test-driven-development and test-driven-design (tdd). But the reality of many codebases I have seen is that tdd is often limited to the backend, where the "business logic" lives. Part of this is due to a stigma that frontend development is not "real software developme
チームラボはアートだけでなくWebやアプリの受託開発も行っています。 そんなチームラボのフロントエンドチームで使用しているアーキテクチャを実例を交えてご紹介します。 Frontend Conference Fukuoka 2019 にて登壇しました。 https://frontend-…
STORES.jp入社3ヶ月で気づいたこと ~Nuxt.js 移行における 未来を見据えたコンポーネント設計~ / Components Design of Frontend in STORES.jp
STORES.jp Meetup for Front-end Engineers #1 (https://hey.connpass.com/event/143246/ )の発表資料です。 STORES.jp入社3ヶ月で関わったアイテム編集ページ移行PJTでのコンポーネント設計について発表しました。
@1000ch です。Merpay Advent Calendar 2020 の 22 日目を担当します。私は 2018 年 3 月に創業期のメルペイにジョインしまして、もう 2 年 10 ヶ月が経ったことになります。2020 年は新型コロナウイルスで何かと大変な状況が続いていますが、今年の頭からメルカリ側のプロジェクトにも関わっていまして、メルカリとメルペイ両方の Web に関わっています。メルカリ側の話はまた別の機会に書かせてもらうとして、今回はメルペイの Frontend の話をします。 チーム組成のこれまで 入社したのは 2018 年 3 月ですが、メルペイに Frontend チームが組成されたのは 2018 年 7 月で、PM/EM/TL体制が導入されたタイミングでした。そこから本格的に Merpay Frontend の組成に関わってきました。…と言いたいところですが、本当は
進化したWeb技術でPWAをネイティブアプリに近づける / frontend-conf-2023
フロントエンドカンファレンス沖縄2023の登壇資料です。 https://frontend-conf.okinawa.jp/ PDF出力の関係で一部レイアウトが崩れてるので、アニメーションありは以下のリンクから表示できます。 https://yuheifujita.github.io/frontend-conf-2023/
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！ Bonfire運営の春野です。 2020年2月5日（水）にヤフーのセミナールームにて「Bonfire Frontend #5」を開催しました！ そのイベントの様子をレポートします。Bonfire Frontendは、様々な最新技術の活用方法やデザイナー、バックエンドとの連携など、フロントエンドが抱える課題を共有し、フロントエンドについてを熱く語る会です。 第5回となる今回のテーマは「テストと自動化」。 ヤフーからはトップページを担当している西村 宗親が登壇し、ゲストスピーカーとして株式会社ICSより森田 勝駿さん、株式会社ゆめみよりunotovive・おとべさんにお話しいただきました。どのようにテストを活用しているの
こんにちは。メルペイのフロントエンドエンジニアの @tokuda109 です。Merpay Tech Openness Month 2021 の13日目を担当します。 メルペイのフロントエンドチームは、管理している全てのサービスに対し E2E テストを継続的に実行しています。E2E テストの導入に関する取り組みについては「Cypress + TestRail による Frontend E2E テストの効率化について」で詳しく書かれています。 全てのサービスで E2E テストが導入されていますが、この記事で述べられているとおり、安定して動作しているわけではありません。テストが失敗することが多々発生していました。 本記事では、E2E テストがなぜ安定して動作しないかを調査し、どのように改善したかを紹介します。 背景 メルペイのフロントエンドチームは、テスト、パフォーマンス、アクセシビリティ、セ
GitHub - create-go-app/cli: ✨ A complete and self-contained solution for developers of any qualification to create a production-ready project with backend (Go), frontend (JavaScript, TypeScript) and deploy automation (Ansible, Docker) by running only one
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
We use cookies (and other similar technologies) to collect data to improve your experience on Frontend Toolkit. By using Frontend Toolkit, you’re agreeing to the collection of data as described in our Privacy Policy.
BFFとは 名前の通り、フロントエンドのためのバックエンド（サーバ）です。フロントエンドのためにAPIをコールしたり、HTMLを生成したりするサーバ 2000年代前半のWebアプリは、HTMLが主体で動きがシンプルだった。しかしWebアプリが技術進化で複雑化するにつれて フロントエンド側にクライアントごとの要求に応えるためのサーバを配置してバックエンドのAPIサーバとの橋渡し役とするアーキテクチャが開発されるようになりました。 BFFの役割 BFFはフロントとバックエンドの姿勢・方針が乖離している場合に仲介役となることができる [メリ] バックエンドアプリの仕様が完全に固まっていて変更が難しい場合や、バックエンドとフロントが完全に別チームで開発される場合には「バックエンド側での対応が難しいから、フロント側の開発者がBFFを設け、そこで対応する」ことができる [デメ/思ったこと] フロントと
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Frontend Study #1: 基調講演 - Frontend 領域を再定義する
あなたのパフォーマンスを倍にする Frontend Ops の傭兵はいかがですか
![[みんなのケータイ]iPhoneに見知らぬ番号からの電話――そんなときは「iOS 18」の新機能「ライブ留守番電話」をどうぞ](https://cdn-ak-scissors.b.st-hatena.com/image/square/84d194e50598720e5fc728791ad226528fe60274/height=288;version=1;width=512/https%3A%2F%2Fk-tai.watch.impress.co.jp%2Fimg%2Fktw%2Flist%2F1638%2F221%2F01.jpg)
Clean Architecture on Frontend （翻訳） - Qiita
Hotwire for Frontend devs
select-frontend-tech.md
Clean Architecture on Frontend
【LINE証券 FrontEnd】Recoilを使って安全快適な状態管理を手に入れた話
The State of Frontend 2022
【LINE証券 FrontEnd】コンポーネントをカスタムフックで提供してみた
cloudflare の better micro frontend を読む
【LINE証券 FrontEnd】LINE証券フロントエンドの全体像
フロントエンドのエコシステム / Frontend Ecosystem
Swdev: 真の No bundle frontend
Mirage JS • An API mocking library for frontend developers
Build smaller, faster, and more secure desktop applications with a web frontend | Tauri Apps
Frontend Architecture of teamLab
Merpay Frontend のこれまでとこれから | メルカリエンジニアリング
テストと自動化、どうしてる？ 〜 Bonfire Frontend #5 開催レポート
Frontend E2Eテストの安定化の取り組み | メルカリエンジニアリング
Utilities for your recurring Frontend tasks
BFF(Backend For Frontend)のメリット/デメリットと導入の是非について
note.com/lanlanguages
machape.hatenablog.com
kanmioyaji.hatenablog.com
www.imarcgroup.com
theriver.jp
www.nikkei.com