2024/12/12に開催された「フロントエンドの技術選定~2024年を振り返る~Lunch LT」のイベントツイートまとめです Read more >>
Learn how Vercel cut build times and improved developer velocity while maintaining a smooth user experience with microfrontends. Vercel's main website, once a single large Next.js application, serves both our website visitors and logged-in dashboard. But, as Vercel grew, this setup revealed opportunities for improvement. Build times grew, dependency management became more intricate, and workflows
OverviewDesign systems power the frontend teams of Shopify, IBM, Salesforce, Airbnb, Twitter, and many more. This guide for professional developers examines how the smartest teams engineer design systems at scale and why they use the tools they use. We'll walk through setting up core services, libraries, and workflows to develop a design system from scratch. Table of Contents
こんにちは、うしろのこです。直近1年ではVueから離れて、maja と呼ばれる組織管理基盤の新規プロダクトの開発をしていました。 プロダクトの話はこちら(maja)↓ note.st.inc 今回は、0->1における技術選定や開発中の工夫、結果どうだったかなどを書きます。 技術選定 初めに、前提条件は以下のような感じでした。 メンバーはReactの経験が豊富、フロントを触るのは多くて3,4人くらい 常にユーザー認証された状態で操作されるため、FE用のmiddleware的な層があるとうれしい toBアプリケーション せっかくなので使ったことのないものを使ってみよう、ということで、すでにWAFでの導入が進んでいたCloudflareの技術の採用をFEでも検討しました。少し触った感じではdeploy体験がよく、ローカル開発環境であるwranglerの出来も申し分なかったため、Cloudflar
本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとはJavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセットスーパーセットとは、元の言語との
はじめに こんにちは。サーバーサイドエンジニアの mokuo です。 最近、ミニマムな React アプリを実装する機会がありました。 社内のメンバーにアドバイスをもらいながら、今（2024年前半） React アプリをミニマムに作るならこんな感じかな、という構成になった気がするので、ご紹介したいと思います。 実例の1つとして参考にしていただけますと、幸いです。 はじめに 本文 📝 機能要件 ⚒️ 採用したツール (npm モジュール) 📁 ディレクトリ構成 👨💻 プロトタイピングの実施 🍩 おまけ コンポーネント設計について フロントエンドに DDD のエッセンスを取り入れてみたい おわりに 本文 📝 機能要件 社内の限られた CS メンバーのみが利用する、管理画面を開発しました。 バックエンドは Golang で実装される API サーバーで、認証機能以外だと、2つの機能
※こちらはバイセルテクノロジーズ Advent Calendar 2023の10日目の記事です。 前回の記事は、金澤さんのAuth0とEntra IDを扱うプロダクト同士を繋げるためのIstio設定あれこれでした。 はじめに こんにちは、開発3部の神保です。 バイセルでは、お客様宅への出張訪問による買取が買取チャネルの主力となっています。現在開発3部の弊チームでは、この出張訪問買取で使用されるWebアプリケーション「Visit」の新規開発を進めています。 VisitのフロントエンドにはReactを採用しましたが、Next.js等のフレームワークは使用せず、Vite + ReactによるSPA (Single Page Application)構成を選択しました。 技術選定の過程では、社内での採用事例などからNext.jsも検討の対象となりましたが、最終的にはその採用を見送る結論に至りました
はじめにクイックスタート (5分)チュートリアル (30分)v2へのアップグレードコミュニティFuture フラグ変更ログ議論のトピックはじめに、技術的な説明ランタイム、アダプター、テンプレート、およびデプロイメントルート設定フルスタックデータフローサーバー側コード実行とクライアント側コード実行React Routerプログレッシブエンハンスメント待ち UI状態管理ネットワーク並行処理の管理フォーム vs. フェッチャーホットモジュール置換フォームの再送信ファイル命名規則.client モジュール.server モジュールアセットインポートentry.cliententry.serverrootルートファイルの命名vite.config.tsルートモジュールactionclientActionclientLoaderコンポーネントErrorBoundaryhandleheadersHydr
業務で携わっている案件なのですが、アクセス数の急増が見込まれるイベントがありまして。準備期間も少なく、バックエンド側でできることがほぼないという状況でサイトを落とさないようにがんばる！というお仕事でした。レガシーソースてんこ盛り。CSSプリプロセッサとか何それ状態。 そこで実施した対策のまとめです。サーバー・アプリケーション・サイトの構成によって、効果の大小はありますが、比較的効果があったと思われるものをつらつらと。 リクエストの削減とファイルサイズの最適化 まず一番最初に考えなければいけないのがリクエスト数です。すごいおおざっぱに言うと、WEBサーバー（ApacheとかNginxとか）への負荷は、PV数×リクエスト数です。PVがそんなに無くてもそのページのリクエストがめちゃくちゃ多いとそれだけでかなりの負荷になります。リクエストを半分にできれば2倍の人数がさばけるってことに、すげーおおざ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
