タグ

frontendとTypeScriptに関するko-ya-maのブックマーク (4)

  • 実行環境依存のコードに対してテストを書く考え方

    社内用の啓発記事ですが、閉じる理由がないのでここに投げます。 ブラウザにべったりなコードを書いてると、ブラウザや node.js 固有の環境をインラインで記述してしまうことが多々あると思います。 あえてダメダメなブラウザ向けのエントリポイントの例を書きます。 // main.ts let id = localStorage.get('id'); if (!id) { id = `${navigator.userAgent}-${Math.random()}`; localStorage.set('id', id); fetch('/auth', { method: 'POST', credentials: 'include', body: JSON.stringify({ id, at: Date.now(), }), headers: {'Content-Type': 'applicat

    実行環境依存のコードに対してテストを書く考え方
    ko-ya-ma
    ko-ya-ma 2022/03/04
    とても良い内容。ただこれを読んで理解できる人は既に読む必要がない段階まで行っていそう。噛み砕いて説明しながら一緒にリファクタリングする勉強会が必要なんだろうなぁ…
  • フロントエンドのモノレポ構成はスケーリングの夢を見るか | サイボウズ フロントエンドエキスパートチーム

    それっぽいタイトルを付けましたが特に意味はないです。 workspace を使ったコマンドを最適化して実行する Turborepo についてのお話で Turborepo を軽く触ってみた際にnpx create-turbo@latestで作られる構成がとてもわかりやすく、プロダクトの初期段階からモノレポを採用するのは選択肢の 1 つとしていいのでは、と思い続編を書きました。 前回と同じくサンプルのリポジトリはこちらになります。 https://github.com/nus3/p-turborepo/tree/main/yarn 概要 モノレポを採用することで、同一リポジトリ内で自作した汎用的なライブラリやコンポーネントを複数のアプリケーションで使いまわせる モノレポの規模が大きくなってきた場合には、モノレポ内のパッケージを npm に公開することでアプリケーションとパッケージを非同期に開発

    フロントエンドのモノレポ構成はスケーリングの夢を見るか | サイボウズ フロントエンドエキスパートチーム
  • Clean Architecture on Frontend

    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'

    Clean Architecture on Frontend
    ko-ya-ma
    ko-ya-ma 2021/09/07
    かなりわかりやすいクリーンアーキテクチャの実践例
  • Swdev: 真の No bundle frontend

    みなさん、ブラウザ内で TypeScript が直接動いてくれたらいいなぁ、と思ったことはありませんか? しました。 これができます。 どのようにうごいてるか Service Worker は合法 MITM とも言えて、 fetch 時のリクエストを好きに書き換えることができます。 開発時 初回インストール時に Service Worker をインストール コンパイラを内蔵した Service Worker がリクエストの拡張子に応じて js に書き換える Content-Type: text/javascript として SW でキャッシュして返却 TypeScript(.ts, .tsx) と Svelte(.svelte + preprocess) に対応 WebSocket サーバーを起動。ファイル変更を監視して、変更されたファイル名をブラウザに通知 変更されたファイルを Serv

    Swdev: 真の No bundle frontend
  • 1