ざっくり知る tamagui v1

2023/1/18に開催された第4回 LT 練習会（仮）の発表資料です。
https://gaji-lt.connpass.com/event/269690/

Transcript

1. ざっくり知る tamagui v1 2023/1/18 第4回LT練習会（仮）発表資料 ざっくり知る tamagui v1 @kimizuy
2. 自己紹介 ID: @kimizuy 株式会社 Gaji-Labo フロントエンドエンジニア 最近は React や TypeScript をメインで使っています。 趣味はスプラトゥーン 3 です。 https://github.com/kimizuy https://twitter.com/kimizuy ざっくり知る tamagui v1 @kimizuy
3. 2022/12 に v1 がリリースされたフルスタックUIフレームワーク tamagui を紹介します ざっくり知る tamagui v1 @kimizuy
4. tamagui の概要 読み方は「たまぎゅい」らしい React Native と React Native for web で動作する UI ライブラリスイート ビルド時にコードを評価し、重い JS をよりフラットなツリーとより高速な CSS に変換 する React 用の新しい最適化コンパイラを提供する Core, Static, UI で構成される ざっくり知る tamagui v1 @kimizuy
5. ざっくり知る tamagui v1 引用: https://tamagui.dev/docs/intro/why-a-compiler
6. Tamagui Core, Static, UI をそれぞれ紹介します ざっくり知る tamagui v1 引用: https://tamagui.dev/docs/intro/why-a-compiler
7. Tamamgui Core React Native の API を 100%サポートする依存性 0 の React Native/Web 用スタイルライブ ラリ styled() import { Stack, styled } from '@tamagui/core' export const Circle = styled(Stack, { backgroundColor: '$background', borderRadius: '$4', }) ざっくり知る tamagui v1 引用: https://tamagui.dev/docs/intro/why-a-compiler
8. デザインシステム import { createTamagui, createTokens } from '@tamagui/core' const tokens = createTokens({ size, space: { ...size, '-1': -5, '-2': -10 }, radius: { 0: 0, 1: 3 }, zIndex: { 0: 0, 1: 100, 2: 200 }, color: { white: '#fff', black: '#000' }, }) export default createTamagui({ fonts: { heading: interFont, body: interFont, }, tokens, themes: { light: { bg: '#f2f2f2', color: tokens.color.black }, dark: { bg: '#111', color: tokens.color.white }, }, media: { sm: { maxWidth: 860 }, gtSm: { minWidth: 860 + 1 }, }, shorthands: { px: 'paddingHorizontal', f: 'flex', }, }) ざっくり知る tamagui v1 引用: https://tamagui.dev/docs/intro/why-a-compiler
9. Tamagui Static Core 上にある最適化コンパイラで、ロジックが散りばめられたインラインスタイルもアトミ ック CSS と最小限の JS に変換し、ビューツリーをフラットにしてパフォーマンスを最大化 する。 ざっくり知る tamagui v1 引用: https://tamagui.dev/docs/intro/why-a-compiler
10. import { Stack } from '@tamagui/core' import { Heading } from './Heading' const App = (props) => ( <Stack px="$2" w={550} $gtSm={{ px: '$6' }}> <Heading size={props.big ? 'large' : 'small'}>Lorem ipsum dolor.</Heading> </Stack> ) ↓ import { Stack } from '@tamagui/core'; import { Heading } from './Heading'; export default (props) => ( <div className={_cn}> <span className={_cn2 + (_cn3 + (props.big ? _cn4 : _cn4))}>Lorem ipsum dolor.</span> </div> ); const _cn4 = " _col-b5vn3b _ff-4yewjq"; const _cn3 = " _ml-0px ..."; const _cn2 = " is_Heading ..."; const _cn = " is_Stack ..."; ざっくり知る tamagui v1 引用: https://tamagui.dev/docs/intro/why-a-compiler
11. ざっくり知る tamagui v1 引用: https://tamagui.dev/docs/intro/why-a-compiler
12. Tamagui UI Core の非常に強力なテーマプリミティブの上に構築されたコンポーネントキットです。 Composable-Component の API と完全なサイズコントロールとともに、今までの UI キット にはなかった新しいレベルのコントロールを可能にします。 ざっくり知る tamagui v1 引用: https://tamagui.dev/docs/intro/why-a-compiler
13. tamagui を使ってみる npm create tamagui@latest yarn workspaces を使ったモノレポ構成のプロジェクトが作成される。 Expo(iOS, Android)と Next.js(Web)を使用 ざっくり知る tamagui v1 引用: https://tamagui.dev/docs/intro/why-a-compiler
14. まとめ スタイルライブラリ、パフォーマンス最適化のためのコンパイラ、UI キットが組み合わ さっている ざっくり知る tamagui v1 引用: https://tamagui.dev/docs/intro/why-a-compiler
15. ルートのディレクトリ構成 . ├── .git ├── .gitignore ├── .prettierrc ├── .watchmanconfig ├── .yarn ├── .yarnrc.yml ├── README.md ├── apps ├── node_modules ├── package.json ├── packages ├── tsconfig.base.json ├── tsconfig.json ├── turbo.json └── yarn.lock ざっくり知る tamagui v1 引用: https://tamagui.dev/docs/intro/why-a-compiler
16. apps のディレクトリ構成 ├── expo │ ├── .expo │ ├── .gitignore │ ├── App.tsx │ ├── app.json │ ├── assets │ ├── babel.config.js │ ├── eas.json │ ├── index.js │ ├── metro.config.js │ ├── package.json │ ├── tamagui.config.ts │ └── tsconfig.json └── next ├── .eslintrc.js ├── .next ├── .tamagui ├── next-env.d.ts ├── next.config.js ├── node_modules ├── package.json ├── pages ├── public ├── tamagui.config.ts └── tsconfig.json 以上、ご静聴いただきありがとうございました。 ざっくり知る tamagui v1 引用: https://tamagui.dev/docs/intro/why-a-compiler
17. 参考 https://tamagui.dev/blog/version-one https://tamagui.dev/docs/intro/why-a-compiler ざっくり知る tamagui v1 引用: https://tamagui.dev/docs/intro/why-a-compiler