Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
Silvan Strübi committed Mar 3, 2021
2 parents 049f412 + b93a89f commit 0344c20
Showing 1 changed file with 1 addition and 11 deletions.
12 changes: 1 addition & 11 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@

### [Demo](https://mits-gossau.github.io/event-driven-web-components-realworld-example-app)    [Test](https://mits-gossau.github.io/event-driven-web-components-realworld-example-app/test)    [RealWorld](https://github.com/gothinkster/realworld)
```diff
- Work in progress...
```


This codebase was created to demonstrate a fully fledged fullstack application built with Event Driven Vanilla JS Web Components including CRUD operations, authentication, routing, pagination, and more.
Expand All @@ -33,7 +30,7 @@ For more information on how to this works with other frontends/backends, head ov

# Explanations

* **ShadowDOM**'s mostly shine when encapsulating CSS. But the Conduit example has one global CSS Stylesheet and for that reason, it is more efficient to not have shadowDOM's, which all would have to import that global CSS separately. Note: The biggest strength of Web Components is their shadowDOM, means in a real life examples you would share general CSS styles through CSS variables and have specific styles on each component in their respective shadowDOM. This will improve performance, since the DOM renderer only needs to respect certain CSS for certain nodes/shadowDOM's. There is a good helper Class, which you can use to simply add CSS with the lines: ```this.css = '...' ``` and to avoid resetting nodes with innerHTML, it includes a function: ```this.html = '' ```. Overall, this prototype Class helps you to easily and comfortably deal with the ShadowDOM. Have a look at: [Weedshaker's web components *(work in progress)*](https://github.com/Weedshaker/web-components/blob/master/prototypes/MasterShadow.js)
* **ShadowDOM**'s mostly shine when encapsulating CSS. But the Conduit example has one global CSS Stylesheet and for that reason, it is more efficient not to have shadowDOM's, which all would have to import that global CSS separately. Note: The biggest strength of Web Components is their shadowDOM, means in a real life examples you would share general CSS styles through CSS variables and have specific styles on each component in their respective shadowDOM. This will improve performance, since the DOM renderer only needs to respect certain CSS for certain nodes/shadowDOM's. There is a good helper Class, which you can use to simply add CSS with the lines: ```this.css = '...' ``` and to avoid resetting nodes with innerHTML, it includes a function: ```this.html = '' ```. Overall, this prototype Class helps you to easily and comfortably deal with the ShadowDOM. Have a look at: [mits-gossau/web-components *(work in progress)*](https://github.com/mits-gossau/web-components/blob/master/src/es/components/prototypes/Shadow.js)

# Lighthouse Audits

Expand All @@ -51,10 +48,3 @@ For more information on how to this works with other frontends/backends, head ov

## Event Driven Vanilla JS Web Components (95)
![event-driven-web-components-realworld-example-app](./images/event-driven-web-components-realworld-example-app.png)

## TODO

1. header/profile
2. otherUser/profile
3. article/comments etc.
4. clean error handling at controller level (linter is complaining if there are no error handlings)

0 comments on commit 0344c20

Please sign in to comment.