metaUI - Introduction - Speaker Deck

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Title First Name Last Name Age Profession Company size General < 10 > 10 < 50 > 50 Save Please have a brief look at the form on the right ...

Slide 3

Slide 3 text

Each ﬁeld is represented by a bunch of components. Title

Slide 4

Slide 4 text

The more components the more lines of code you have to maintain.

Slide 5

Slide 5 text

Scrolling down the code is like watching a Star Wars Intro.

Slide 6

Slide 6 text

15 form ﬁelds produce around 100 lines of code.

Slide 7

Slide 7 text

...add i18n? What impact would it have if you...

Slide 8

Slide 8 text

...deal with role concept? What impact would it have if you...

Slide 9

Slide 9 text

...deal with dynamic layouts? What impact would it have if you...

Slide 10

Slide 10 text

10 domain objects → 3 pages for each → 30 pages → over 3000 lines of code

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

metaUI uses your model + Meta data describing the object Model Meta Data

Slide 14

Slide 14 text

metaUI is a set of APIs and components

Slide 15

Slide 15 text

metaUI derives the whole UI for you without templates.

Slide 16

Slide 16 text

metaUI reduces the amount of code you have to write by 70%.

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Most of the IO code written in traditional frameworks is a mechanical application of (unstated) rules rooted in the domain object data model.” Craig Federighi

Slide 19

Slide 19 text

Object Style Sheet (OSS) describes your UI. class=PersonalInfo { field=title { label: "Title"; } field=firstName { label: "First Name"; } }

Slide 20

Slide 20 text

.box { .shape { background-color: #9d9d9d; } } SASS OSS class=PersonalInfo { field=title { label: "Title"; } field=firstName { label: "First Name"; } }

Slide 21

Slide 21 text

Features Dry Principle Customization capability UI Library agnostic

Slide 22

Slide 22 text

Reviewing the basic approach...

Slide 23

Slide 23 text

Entity Rule

Slide 24

Slide 24 text

Entity import { Entity } from '@ngx-metaui/rules'; export class Character implements Entity { className(): string { return 'Character'; } identity(): string { /* ... /* } getTypes(): any { return { /* ... /* }; } }

Slide 25

Slide 25 text

Entity import { Entity } from '@ngx-metaui/rules'; export class Character implements Entity { constructor( public id: string ) {} getTypes(): any { return { id: String }; } } Needed for Introspection

Slide 26

Slide 26 text

Rule class=Character { field=id { label:"Id"; } }

Slide 27

Slide 27 text

Rule class=Character { field=id { label:"Id"; } } Entity import { Entity } from '@ngx-metaui/rules'; export class Character implements Entity { constructor( public id: string ) {} getTypes(): any { return { id: String }; } }

Slide 28

Slide 28 text

Entity Rule Rule Processor

Slide 29

Slide 29 text

- Knows about types - Knows how types are rendered Rule Processor import { Entity } from '@ngx-metaui/rules'; export class Character impleme constructor( public id: string ) {} getTypes(): any { return { id: String }; } }

Slide 30

Slide 30 text

Rule processor Entity

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Entity Setup metaUI

Slide 33

Slide 33 text

Setup metaUI @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, AppRoutingModule, MetaUIRulesModule.forRoot(), MaterialRulesModule.forRoot() ], bootstrap: [AppComponent] }) export class AppModule {}

Slide 34

Slide 34 text

Review 1st refactoring...

Slide 35

Slide 35 text

field=avatarUrl { label:"Profile Url"; } OSS ﬁeld

Slide 36

Slide 36 text

field=avatarUrl { label:"Profile Url"; component: ImageComponent; } OSS ﬁeld - Link your Component

Slide 37

Slide 37 text

field=avatarUrl { label:"Profile Url"; component: ImageComponent; bindings: { url: $value; alt: ${object.firstName + ' ' + object.lastName + ' avatar image'}; }; } OSS ﬁeld - Bind component values

Slide 38

Slide 38 text

OSS @ﬁeld - Create computed properties @field=fullName { type: String; value: ${object.firstName + ' ' + object.lastName}; } Entity export class Character implements Entity { constructor( public firstName: string, public lastName: string ) {} }

Slide 39

Slide 39 text

OSS trait - Build reusable rules @field=fullName { trait: derived, heading1; type: String; value: ${object.firstName + ' ' + object.lastName}; } Rule @trait=heading1 { wrapperComponent:GenericContainerComponent; wrapperBindings: { tagName:h1; }; } Source

Slide 40

Slide 40 text

OSS trait - Build reusable rules Traits behave like mixins you know from .

Slide 41

Slide 41 text

Review 2nd refactoring...

Slide 42

Slide 42 text

OSS operation - Deﬁne your view class=Character { operation=(view) { zNone => *; zLeft => fullName => avatarUrl; } operation=(edit) { @field=title { trait: derived, heading1; type: String; value: 'Edit'; } zNone => *; zLeft => title => firstName => lastName => lightsaberColor; } /* add as many operations you like */ }

Slide 43

Slide 43 text

OSS operation - Deﬁne your view class=Character { operation=(view) { zNone => *; zLeft => fullName => avatarUrl; } }