Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
smalluban committed Nov 16, 2018
1 parent 356e403 commit 9d2c228
Show file tree
Hide file tree
Showing 15 changed files with 622 additions and 184 deletions.
16 changes: 8 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,14 @@ Then, import required features and define a custom element:
```javascript
import { html, define } from 'hybrids';

export function increase(host) {
export function increaseCount(host) {
host.count += 1;
}

export const SimpleCounter = {
count: 0,
render: ({ count }) => html`
<button onclick="${increase}">
<button onclick="${increaseCount}">
Count: ${count}
</button>
`,
Expand Down Expand Up @@ -67,18 +67,18 @@ There are some common patterns among JavaScript UI libraries like class syntax,

Classes can be confusing, especially about how to use `this`, binding or `super()` calls. They are also really hard to compose. Complex lifecycle callbacks have to be studied to understand very well. Also, a stateful approach can open doors for creating hard to maintain, imperative code. Is there any way out from all of that problems?

After all, class syntax in JavaScript is only sugar on top of the constructors and prototypes. Because of that, the component structure can be switched to a map of properties applied to the prototype of the custom element class constructor. Moreover, lifecycle can be minimized with smart change detection and cache mechanism. Those callbacks can be implemented independently in the property scope rather than globally in the component definition.
After all, class syntax in JavaScript is only sugar on top of the constructors and prototypes. Because of that, the component structure can be switched to a map of properties applied to the prototype of the custom element class constructor. Moreover, lifecycle callbacks can be minimized with smart change detection and cache mechanism. They can be implemented independently in the property scope rather than globally in the component definition.

With all of that, the code becomes simple to understand, and data flow is written in a declarative way. Not yet sold? You can read more in the [Core Concepts](docs/core-concepts/README.md) section of the project documentation.

## Documentation

The hybrids documentation is available at [gitbook.io](https://hybrids.gitbook.io/hybrids) or in the [docs](docs/README.md) path of the repository:
The hybrids documentation is available at [hybrids.js.org](https://hybrids.js.org) or in the [docs](docs/README.md) path of the repository:

- [Core Concepts](docs/core-concepts)
- [Built-in Factories](docs/built-in-factories)
- [Template Engine](docs/template-engine)
- [Misc](docs/misc)
- [Core Concepts](docs/core-concepts/README.md)
- [Built-in Factories](docs/built-in-factories/README.md)
- [Template Engine](docs/template-engine/README.md)
- [Misc](docs/misc/README.md)

### Live Examples

Expand Down
9 changes: 4 additions & 5 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,10 @@
## Core Concepts

- [Introduction](core-concepts/introduction.md)
- [Property Descriptors](core-concepts/property-descriptors.md)
- [Descriptors](core-concepts/descriptors.md)
- [Factories](core-concepts/factories.md)
- [Property Translation](core-concepts/property-translation.md)
- [Simplified Lifecycle](core-concepts/simplified-lifecycle.md)
- [Component Definition](core-concepts/component-definition.md)
- [Utils](core-concepts/utils.md)
- [Translation](core-concepts/translation.md)
- [Definition](core-concepts/definition.md)

## Built-in Factories
- [Property](built-in-factories/property.md)
Expand All @@ -32,5 +30,6 @@

## Misc

- [Utils](core-concepts/utils.md)
- [API Reference](misc/api-reference.md)
- [Change Log](../CHANGELOG.md)
285 changes: 285 additions & 0 deletions docs/assets/lifecycle.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 3 additions & 4 deletions docs/core-concepts/README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
# Core Concepts

- [Introduction](introduction.md)
- [Property Descriptors](property-descriptors.md)
- [Descriptors](descriptors.md)
- [Factories](factories.md)
- [Property Translation](property-translation.md)
- [Simplified Lifecycle](simplified-lifecycle.md)
- [Component Definition](component-definition.md)
- [Translation](translation.md)
- [Definition](definition.md)

0 comments on commit 9d2c228

Please sign in to comment.