![纳米](https://habrastorage.org/getpro/habr/post_images/d6c/977/8e1/d6c9778e1a921ab4beee61e2cf1e7c6c.png)
您好,我叫Dmitry Karlovsky,我……喜欢随风吐痰。擦拭自己,然后再次吐。我有这样的爱好。在创建所有内容时,我都不会看趋势,而是试图像往常一样系统地解决问题。通常,主要困难甚至不是想出解决方案,而是要向其他人解释问题甚至存在。
, , , 4 , , , . , , . . , , . .
![图片](https://habrastorage.org/getpro/habr/post_images/94f/165/c79/94f165c7950d2680401d412b0de7c186.png)
2015
- AngularJS 1.4 — , .
- Angular 2 alpha — JS, - -.
- React 0.14 — .
- Polymer 1.2.3 — 1 .
- VueJS 1.0 — .
. , 4 (iOS, Android, Windows, WEB). , () , — , . , , .
:
- . , .
- . , , .
- . , .
- . .
? . 10 , , :
![图片](https://habrastorage.org/getpro/habr/post_images/ef2/d6d/4e7/ef2d6d4e7546cb4d26cbe41ddd822243.png)
. , , . , . — . , , . , , . , — . , 13 24. , , , React.
, , SAPUI5. , , ExtJS.
, , , . . , . .
![图片](https://habrastorage.org/getpro/habr/post_images/504/29a/10b/50429a10b4a7ebb3978543ff8d9b4dc4.png)
, , . . , . : , . — .
— , , ", - ". — .
, , . — , . — , .
. . , , : , , , , , , . , . , , . .
" , ", . $mol. ( ), ( , ).
. - , . " ?". , , .
![图片](https://habrastorage.org/getpro/habr/post_images/b7b/0d2/995/b7b0d29959574035647846fac84591be.png)
2016. MIT , . , "$mol: reactive micromodular ui-framework" , .
, , . - "", . - , .
. . , . , , , , . — . 20 , , "". , , . , , . . , , , . view.tree , . , . , . - — .
, $mol, . , . . . IT , . , , . . . . — , , , , .
![图片](https://habrastorage.org/getpro/habr/post_images/7d7/b2c/d61/7d7b2cd615737f852fff497a4f42899e.png)
2017. . , , . 2 , . , , 2 , , . . . .
$mol . , , . $mol , . , :
![图片](https://habrastorage.org/getpro/habr/post_images/61f/e4e/716/61fe4e7169baae791797925015347d24.png)
, . . . ( 33 ? : ). - . : css-variables, - ( , ), mobx-angular Suspense API ( , 2 )… , open source, . , $mol . $mol , .
. , , , $mol , — , , , , , , , . , NgRx ( redux ). , mobx , .
, , . , . $mol. , — $mol_graph. $mol-, , .
![辛普森一家](https://habrastorage.org/getpro/habr/post_images/59b/58c/95c/59b58c95c03e87a1e1d2a34afaa0cc6c.png)
, $mol :
![图片](https://habrastorage.org/getpro/habr/post_images/cd6/f16/22e/cd6f1622ed98ad19851d75ec01122578.png)
, . , . . — , , .
Vue. . , MobX, , . MobX , . , , .
$mol . , $mol, $mol_mem.
![图片](https://habrastorage.org/getpro/habr/post_images/0f5/903/079/0f5903079fec4fd5941a1df032f1fe97.png)
— , .
Suspense API . Vue - . MobX, , .
$mol . promises, callbacks, async/await. , . , , , . , , :
@ $mol_mem
user_name() : string {
return $mol_fetch.json( '/profile' ).name
}
![图片](https://habrastorage.org/getpro/habr/post_images/631/0a2/dbe/6310a2dbe55d2666647c66ef116b59bf.png)
, 4 — , TS . TS — Angular 2 — TS, JS. , JS Angular — . Vue 3 TS. React JS, MicroSoft JSX TypeScript. , , , , . API JS , .
$mol TS, . . TS, . , . .
, , . , view.tree TS, , , .
![图片](https://habrastorage.org/getpro/habr/post_images/ae0/469/d23/ae0469d23daa884e4a8ef3d55fcec9e5.png)
. : , , , , - … . . , , , . , WebPack.
$mol , — , . , . . , " , , , ". , "lerna" . MAM , $mol . MAM .
MAM , , , , .
, MAM , , . parcel, html . , . , . — .
MAM . . . eject CLI . , . . , .
![图片](https://habrastorage.org/getpro/habr/post_images/b2e/f07/5f5/b2ef075f5d4f9adc733dd5bfa11b48db.gif)
PHP JS . . — , , , 10. , , , , , . . tree shaking, , , . Angular Vue , . React .
, - , , , . MAM , , . , . — . , , $mol , . , , .
$mol , , - . — Svelte, . , , .
![图片](https://habrastorage.org/getpro/habr/post_images/002/8b9/0e4/0028b90e4f178384e24e930ebe1f7ffd.png)
, , . , . . . IoC Dependency Injection. DI , , .
$mol IoC Ambient Context — , . , :
namespace $ {
export function $my_hello(
this : $mol_ambient_context
) {
this.console.log( this.$my_name )
}
export let $my_name = 'Anonymous'
}
namespace $ {
$mol_ambient({}).$my_hello() // logs 'Anonymous'
let custom_context = $mol_ambient({
$my_name : 'Jin' ,
})
custom_context.$my_hello() // logs 'Jin'
}
![图片](https://habrastorage.org/getpro/habr/post_images/140/22a/be1/14022abe18aade1e6b11ccdf7b4ca739.png)
React 16 — Error Boundaries. , , , . , . 15 . — , .
. -. . : - - , . , $mol ? — . .
, — , . Promise. , - , . "" .
![图片](https://habrastorage.org/getpro/habr/post_images/cb9/c14/2d3/cb9c142d3025abc299a7a961f4d1f128.png)
4 , $mol . . , , $mol .
![图片](https://habrastorage.org/getpro/habr/post_images/bb8/ca3/29d/bb8ca329dbd8008e6a923c28ee334ece.png)
, . . , . , , , html- .
, , : html- , html-. $mol html- — , , . $mol React Native, html-, View, Text . html- -. TSX TS:
function MyApp(
{
leftColor = 'red',
rightColor = 'blue',
message = 'Hello World!',
} : {
leftColor? : string,
rightColor? : string,
message? : string,
}
) {
return (
<View>
<View style={{ backgroundColor: leftColor }} />
<View style={{ backgroundColor: rightColor }} />
<Text>{message}</Text>
</View>
)
}
function MyApp(
{
leftColor = 'red',
rightColor = 'blue',
message = 'Hello World!',
} : {
leftColor? : string,
rightColor? : string,
message? : string,
}
) {
return (
View({
kids: [
View({ style: { backgroundColor: leftColor } }),
View({ style: { backgroundColor: rightColor } }),
Text({ kids: [ message ] }),
]
})
)
}
: , , , HTML . HTML , TS, $mol — , DSL, view.tree:
$my_app $mol_view
sub /
<= Left $mol_view
style *
backgroundColor <= left_color \blue
<= Right $mol_view
style *
backgroundColor <= right_color \red
<= Message $mol_view
sub /
<= message \Hello World!
![图片](https://habrastorage.org/getpro/habr/post_images/f1a/049/700/f1a0497003e019f6b8f0033a3a5e4512.png)
. . . — API. .
, — , . , , , . , "", .
- , . . " " (, React), , . , . , - .
, - , . . , . "" (, Vue), .
$mol . , . , . , , . , view.tree
. , . , , :
$my_app2 $my_app
left_color \brown
right_color \green
sub /
<= Left
<= Right
<= Bid $mol_view
sub /
<= bid @ \Smile if you see it!
<= Message
. - — , .
![图片](https://habrastorage.org/getpro/habr/post_images/6ef/240/f0c/6ef240f0c2a08dbcfc44895feb58f312.png)
TimeSlicing — , , . , "". .
Catberry, , . , — . , , , , DOM , , , (16).
$mol - — . API, . , $mol , 4 , .
, — , . , .
: , . .
![图片](https://habrastorage.org/getpro/habr/post_images/44d/239/378/44d239378dc8c891342f5f73a7ca673a.png)
. , . , . , . — (pull). , , . $mol.
, "". Vue, $mol_atom, . . : . " ". , , , .
$mol " ". , . . , , .
. , html- , , . , .
, $mol_list, , .
— , , , DOM . . . , " " "overflow-anchor", , " ".
, . . , . - , . , .
CSS-in-TS
![图片](https://habrastorage.org/getpro/habr/post_images/a73/ede/b55/a73edeb55184912e320182d23f1bec39.png)
, CSS . css- - , . . . , - .
css-in-js, css . TS, CSS: , . - , TSX VDOM , .
$mol — , . $mol_style , json . .
, :
$my_app $mol_view
sub /
<= Sidebar $my_page
$my_page $mol_view
sub /
<= Head $mol_view
<= Body $mol_view
, , :
$mol_style_define( $my_app , {
Sidebar: {
Body: {
$mol_button: {
color: $mol_theme.text,
},
},
},
} )
CSS:
[my_app_sidebar_body] [mol_button] {
display: none;
}
BEM-like my_app_sidebar_body
, . -, .
$mol CSS, $mol_style. .
— . , .
. 2 : https://notes.hyoo.ru
![笔记](https://habrastorage.org/getpro/habr/post_images/5c3/26e/c1e/5c326ec1efb1f7336a817855cf87a67d.png)
.
, .
PWA .
![网络](https://habrastorage.org/getpro/habr/post_images/a39/d10/c20/a39d10c201cb9251e3a8099681c5cadc.png)
.
50 .
.
.
![时间线](https://habrastorage.org/getpro/habr/post_images/f08/258/cf7/f08258cf7b9e0f4f7fe743596ba8d38d.png)
: https://showcase.hyoo.ru/
!
![图片](https://habrastorage.org/getpro/habr/post_images/6bf/7d0/4f7/6bf7d04f7e1bb4eca96599d08fe92268.png)
? , . , :
- .
- .
- 2 .
- .
- .
- .
- .
- , , .
- .
- .
- .
- .
- .
- , .
- , .
- ( ).
- .
- .
2 . - , . , . , , , . - . .
![图片](https://habrastorage.org/getpro/habr/post_images/47e/b2a/10e/47eb2a10e838ee9c509c9f71c8702509.png)
ui-kit. , , , . . 2:
. , , — , , .
. ui-kit 20 , ui-kit 15 , . — .
. . , , .
-IT-. IT- — — . , . - , BEM-. , , , : . - . , - . FaceBook .
, . , . , , , .
![图片](https://habrastorage.org/getpro/habr/post_images/ee7/605/7d3/ee76057d36510c4cd05ce7322fd69ce4.png)
, -: https://digital.alfabank.ru/
, , , . .
8 - 5 , . , 190 90 . : 300 , . "Slow 3G" 12 .
![主页资源](https://habrastorage.org/getpro/habr/post_images/ad9/bf7/a5f/ad9bf7a5f79f63b9984238de003154ab.png)
, HTML . SSR+hydrate, , , HTML state. , DOM. , , .
, 8 . , , , . - , — .
, . , CSS, — . 3 . CSS, 5 .
, - , , , , . , HTML - 2 , SSR html, , .
2 . — SPA 600 , 16 .
![组件库资源](https://habrastorage.org/getpro/habr/post_images/444/f6a/bd9/444f6abd92f6427948250c1ee8f7de16.png)
, ? , 50 . — mol.js.org 45 , 110 .
, . , . https://alfabank.ru/
400 . 17 . , , , 8 , 6 .
, . ? — amount. , . , :
<div class="amount">
<h3 class="heading heading_size_m heading_margins_m heading_theme_alfa-on-white">
<span>
<span class="amount__major">1 233</span>
<div class="amount__minor-container">
<span class="amount__separator">,</span>
<span class="amount__minor">43</span>
</div>
<span class="amount__currency"> ₽</span>
</span>
</h3>
</div>
8 . . . , . . , .
:
<h3 class="amount">
<span class="amount__major">1 233</span>
<span class="amount__minor">,43 ₽</span>
</h3>
, , , ? , amount button:
const FeeButton = ( { id , submit , size = 'm' , theme = 'dark' , className = '' } ) => (
<Button
onClick={ submit }
className={ "fee-button__submit " + className }
data-test-id={ id }
size={ size }
theme={ theme }
>
<Label
className="fee-button__prefix"
size={ size }
theme={ theme }
>
{ l10n( 'fee-button__prefix' ) }
</Label>
<Amount
className="fee-button__fee"
data-test-id={ id + '/fee' }
amount={ fee }
size={ size }
theme={ theme }
/>
</Button>
)
, ? ? ? , :
<Button id="pay-submit" onClick={ submit }>
<Label id="pay-prefix">{ payPrefix }</Label>
<Amount id="pay-fee" amount={ fee }/>
</Button>
, , - :
<= Pay_submit $alfa_button
click?event <=> submit?event null
sub /
<= Pay_prefix $alfa_label
text <= pay_prefix @ \Pay
<= Fee $alfa_amount
amount <= fee $alfa_currency
, jQuery - . , , . . , .
" ", :
, , .
![图片](https://habrastorage.org/getpro/habr/post_images/67f/f62/9d2/67ff629d2546f01da0afba453feeca40.png)
$mol . . , . , , . . .
, $mol . , (, , JSX — push , pull, $mol).
, , . , $mol . . , .
— - , , , . , . $mol. . . - . , , .
. $mol. - .
. , . , , , . . :
- // $mol. - . — .
- - . . , . $mol .
- . , , , , .
- $mol .
- , $mol . . , $mol , . .
![公会徽章](https://habrastorage.org/webt/lh/bv/yj/lhbvyjrgiznbqkrt5karkbuxpze.png)
$mol — $mol. — $mol. — $mol. , - .
. , , , . , . , , , , .
. . . . , . , . - , . , . , . .
, . , , , . , " ". . , $mol. - , , , , .
, , , . , , , , . — $mol . . . . , .
, , — . , , , 10% . , . — .