Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web開発者におくる .NET 7時代の .NET WebAssemblyとの付き合い方
Search
Yusuke Yamada
December 07, 2022
Technology
0
90
Web開発者におくる .NET 7時代の .NET WebAssemblyとの付き合い方
.NET Conf 2022 Recap Event 東京 で使用したデモの補助スライド
Yusuke Yamada
December 07, 2022
Tweet
Share
More Decks by Yusuke Yamada
See All by Yusuke Yamada
Enterprise以外でもMergeQueueしたい! / Use Merge Queue without GitHub Enterprise
yamachu
0
48
Other Decks in Technology
See All in Technology
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
410
[PyconUS 2024] Having fun with Pydantic and pattern matching
enforcerpl
0
200
パフォーマンス最適化のベストプラクティス
databricksjapan
0
220
生成AI活用推進の為にやったこと/やらなかったこと
ktc_wada
0
230
TypescriptでのContextualな構造化ロギングと社内全体への導入
leveragestech
3
630
回り回って効いてくる副次的効果としての技術広報/techpr
nishiuma
2
210
データ分析力を高めるSQL研修サービス『SQL Everyone』
hikarut
1
410
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
3.3k
SRE活動を促進させるドキュメント技術 〜ドキュメントレビューって、どうやってる?〜
kenta_hi
0
110
AI JIMY - 登壇(インストール編)
hanacchi
0
150
Password cracking: past, present, future
openwall
0
330
【リラン】AIの光と闇?失敗しないために知っておきたいAIリスクとその対応 ①政府の動き編
tkhresk
0
140
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Automating Front-end Workflow
addyosmani
1357
200k
Embracing the Ebb and Flow
colly
80
4.2k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
Done Done
chrislema
178
15k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
Transcript
Web開発者におくる .NET 7時代の .NET WebAssemblyとの付き合い方 山田 裕介 | @y_chu5 Microsoft
MVP Developer Technologies 株式会社CARTA HOLDINGS
自己紹介 • 山田裕介(ちゅうこ) • 株式会社CARTA HOLDINGS / 株式会社サポーターズ • 好きな言語
• TypeScript • Scala • C# @y_chu5 @yamachu
セッション内容について • .NET Conf 2022のセッションのうち、Web開発に関係するものに触れていきます • Webの特にフロント分野 • Blazor WebAssembly
多め • Blazor Server, Blazor Hybrid は取り扱いません • JavaScript interop on WebAssembly が特に注目
Blazor おさらい https://learn.microsoft.com/ja-jp/aspnet/core/blazor/hosting-models?view=aspnetcore-7.0
注目セッション https://www.youtube.com/watch?v=evW4Gj4sHsk https://www.youtube.com/watch?v=w_x1keHyXAY https://www.youtube.com/watch?v=Ru-kO77d3F8 https://www.youtube.com/watch?v=gBky9_AskNQ
What's new for Blazor in .NET 7 .NET 7時代のBlazorの新機能を網羅的に解説 デモを中心に進めるセッション
QuickGridというパフォーマンスに優れた コンポーネントのデモは圧巻
🔥NavigationLock / LocationChanging Locationの変更をハンドリング可能に Formが編集されたら、真偽値で ブラウザの遷移を抑制可能に https://youtu.be/evW4Gj4sHsk?t=718 https://learn.microsoft.com/ja- jp/aspnet/core/blazor/fundamentals/routing?view=aspnetcore- 7.0#handleprevent-location-changes
🔥Loading progress Blazor WebAssemblyアプリの リソースダウンロード状況が取得可能に CSS カスタムプロパティで表現しているた め 柔軟なデザイン表現も Byte数の%ではなくリソース数による%を
表していることに注意 https://learn.microsoft.com/ja- jp/aspnet/core/blazor/fundamentals/startup?view=aspnetcore- 7.0#loading-progress-indicators
🔥Custom elements Blazor Component を Custom Elements として 扱う技術 プレーンなHTML
や React や Angular などの フレームワークとの組み合わせが可能に https://learn.microsoft.com/ja- jp/aspnet/core/blazor/components/?view=aspnetcore- 7.0#blazor-custom-elements
CSS Techniques for Blazor Developers BlazorでのStylingのノウハウが詰まっている BlazorのCSS Isolationの仕組みについても 詳しく解説している貴重なセッション デモがBlazor
WebAssemblyで行われている
.NET ❤️'s WebAssembly in .NET 7 .NET 7 時代の .NET
WebAssembly の強化を 知るならこのセッション 開発体験が大幅に向上したことを 様々なデモを通してアピールしている 強化されたJavaScript interopを使ったデモも .NET 7で大幅にパフォーマンスが向上した Uno Platformの前フリ
Testing Blazor Applications with Playwright Blazor ApplicationsのテストをPlaywrightで、 テストコードをC# で開発している ユーザの操作からテストコードを生成する
デモを行っている Full C# で E2E テストを考えているのであれば ぜひとも参考にしたいセッション
関連資料 • ASP.NET Core 7.0 の新機能 • https://learn.microsoft.com/ja-jp/aspnet/core/release-notes/aspnetcore-7.0?view=aspnetcore-7.0 • デモ
• CSSのデモ • https://github.com/EdCharbeneau/Css-For-Blazor-Developers-Presentation • Hand trackingのデモ • https://github.com/pavelsavara/blazor-wasm-hands-pose • その他使用したデモ • https://github.com/yamachu/NETConf2022RecapDemo • https://github.com/yamachu/pokedex-net-webassembly-without-blazor • Blazor WebAssembly アプリケーションプログラミング自習書 • https://github.com/jsakamoto/self-learning-materials-for-blazor-jp • 事前レンダリングについての解説 • https://qiita.com/jsakamoto/items/bb03b967367ceaecfbd0