Skip to content

Commit

Permalink
chore: phrasing (10-minimum-example/100-break)
Browse files Browse the repository at this point in the history
  • Loading branch information
ubugeeei committed Dec 14, 2024
1 parent 1664428 commit cd3c976
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 14 deletions.
22 changes: 14 additions & 8 deletions book/online-book/src/10-minimum-example/100-break.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
## Minimal Example section is over!

At the beginning, I mentioned that this book is divided into several sections, and the first section, "Minimal Example Section," is now complete. Well done 😁\
If you are interested in Virtual DOM or patch rendering, you can move on to the Basic Virtual DOM section. If you want to extend components further, there is the Basic Component section. If you are interested in richer expressions in templates (such as directives), you can explore the Basic Template Compiler section. If you are interested in script setup or compiler macros, you can proceed to the Basic SFC Compiler section. (Of course, you can do them all if you want!!)\
If you are interested in Virtual DOM or patch rendering, you can move on to the Basic Virtual DOM section. \
If you want to extend components further, there is the Basic Component section. If you are interested in richer expressions in templates (such as directives), you can explore the Basic Template Compiler section. \
If you are interested in script setup or compiler macros, you can proceed to the Basic SFC Compiler section. (Of course, you can do them all if you want!!)\
Above all, the "Minimal Example Section" is also a respectable section, so if you feel like, "I don't need to know too deeply, but I want to get a general idea," then you are good to go up to this point.

## What have we achieved so far?
Expand All @@ -23,7 +25,8 @@ chibivue

https://github.com/vuejs/core

Even though it's small, you should now be able to read and understand the roles and contents of each file to some extent. I hope you will also challenge yourself to read the source code of the parts we haven't covered this time. (You should be able to read it little by little!)
Even though it's small, you should now be able to read and understand the roles and contents of each file to some extent. \
I hope you will also challenge yourself to read the source code of the parts we haven't covered this time. (You should be able to read it little by little!)

## We now know how declarative UI is achieved

Expand Down Expand Up @@ -243,7 +246,8 @@ const app = createApp({

I understood how to achieve the SFC compiler through the Vite plugin.

By implementing the template compiler and utilizing it through the Vite plugin, I gained an understanding of how to implement an original file format that combines script, template, and style into one file. I also learned about what can be done with Vite plugins, as well as transform and virtual modules.
By implementing the template compiler and utilizing it through the Vite plugin, I gained an understanding of how to implement an original file format that combines script, template, and style into one file.\
I also learned about what can be done with Vite plugins, as well as transform and virtual modules.

```vue
<script>
Expand Down Expand Up @@ -330,7 +334,8 @@ From here, it will be divided into 5 parts + 1 appendix.
- compiler macro
- Web Application Essentials Part (Appendix)

This part is an appendix. In this part, we will implement libraries that are frequently used together with Vue in web development.
This part is an appendix. \
In this part, we will implement libraries that are frequently used together with Vue in web development.

- store
- route
Expand All @@ -339,8 +344,9 @@ We will cover the above two, but feel free to implement other things that come t

### Policy

In the Minimal Example part, we explained the implementation steps in quite detail. By now, if you have implemented it, you should be able to read the source code of the original Vue.
Therefore, from now on, the explanations will be kept to a rough policy, and you will implement the actual code while reading the original code or thinking on your own.
(N-no, it's not that I'm getting lazy to write in detail or anything like that!)
Well, it's fun to implement it as the book says, but once it starts to take shape, it's more fun to do it yourself and it leads to a deeper understanding.
In the Minimal Example part, we explained the implementation steps in quite detail. \
By now, if you have implemented it, you should be able to read the source code of the original Vue.
Therefore, from now on, the explanations will be kept to a rough policy, and you will implement the actual code while reading the original code or thinking on your own. \
(N-no, it's not that I'm getting lazy to write in detail or anything like that!) \
Well, it's fun to implement it as the book says, but once it starts to take shape, it's more fun to do it yourself and it leads to a deeper understanding. \
From here on, please consider this book as a kind of guideline, and the main content is in the original Vue source code!
12 changes: 6 additions & 6 deletions book/online-book/src/ja/10-minimum-example/100-break.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
## Minimal Example 部門はここまで!

冒頭で,この本はいくつかの部門に分かれるという話をしたのですが,それの一番最初の部門である「Minimal Example 部門」はここまでで終了です.お疲れ様でした 😁\
Virtual DOM やパッチレンダリング周りに興味がある人は Basic Virtual DOM 部門に進めばいいですし,コンポーネントをもっと拡張したければ Basic Component 部門,\
テンプレートでもっと豊かな表現(ディレクティブなど)に興味があれば Basic Template Compiler 部門,script setup やコンパイラマクロに興味があれば Basic SFC Compiler 部門に進めば良いです.(勿論全部やってもいいですよ!!)\
仮想 DOM やパッチレンダリング周りに興味がある人は Basic Virtual DOM 部門に進めばいいですし,コンポーネントをもっと拡張したければ Basic Component 部門,\
テンプレートでもっと豊かな表現(ディレクティブなど)に興味があれば Basic Template Compiler 部門,script setup やコンパイラマクロに興味があれば Basic SFC Compiler 部門に進めば良いです.(勿論全部やってもいいですよ!!)\
そして何よりこのこの「Minimal Example 部門」もひとつの立派な部門なわけですから,「そんなに深くは知らなくてもいいけど,全体的にサラッとやりたい!」という方はここまでで十分なのです.\

## ここまでで何ができるようになった?
Expand All @@ -14,7 +14,7 @@ Virtual DOM やパッチレンダリング周りに興味がある人は Basic V
## いつもみているものが何処の何なのか,分かるようになった

まず,createApp という最初の開発者インタフェースを通して,(Web アプリの)開発者と Vue の世界がどのようなふうに繋がっているのかを理解しました.
具体的には,最初にやったリファクタを起点に,Vue のディレクトリ構造の基盤とそれぞれの依存関係,そして開発者が触っている部分はどこのなんなのかというのが分かるようになっているはずです.
具体的には,最初にやったリファクタを起点に,Vue のディレクトリ構造の基盤とそれぞれの依存関係,そして開発者が触っている部分はどこのなんなのかというのが分かるようになっているはずです.\
ここらで今現状でのディレクトリと,vuejs/core のディレクトリを見比べてみましょう.

chibivue
Expand Down Expand Up @@ -93,9 +93,9 @@ const component = {
}
```

## Virtual DOM とはなんなのか,何が嬉しいのか,どうやって実装するのかが分かった
## 仮想 DOM とはなんなのか,何が嬉しいのか,どうやって実装するのかが分かった

h 関数を使ったレンダリングの改善として, Virtual DOM の比較による効率的なレンダリングの方法について理解しました.
h 関数を使ったレンダリングの改善として,仮想 DOM の比較による効率的なレンダリングの方法について理解しました.

```ts
// 仮想DOMのinterface
Expand Down Expand Up @@ -304,7 +304,7 @@ export default {

## これからについて

これからは,より実用的なものにしていくにあたって,それぞれのパートをより詳しくやっていきます.
これからは,より実用的なものにしていくにあたって,それぞれのパートをより詳しくやっていきます.\
そして,これから各部門でやることと,進め方(方針)について少し説明します.

## どういうことをやるのか
Expand Down

0 comments on commit cd3c976

Please sign in to comment.