LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-09 21:07:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

blog: fix description and add iframes

Browse Source
This commit is contained in:
William Lohan
2022-05-25 11:25:14 -07:00
parent 9cb44485c8
commit d38c9ccd4b
1 changed files with 24 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
content/blog/dom-pollution-why-i-prefer-vue-over-angular/index.md
View File

@@ -1,7 +1,7 @@
---
{
title: 'DOM Pollution, Why I prefer Vue over Angular',
description: 'See why not all frontend SPA frameworks render the same and what you need to be aware of when using Angular',
title: 'Why I prefer Vue over Angular: DOM Pollution',
description: 'Angular differs from Vue in some keys ways, including its "Incremental rendering". This shift introduces something I call "DOM Pollution"; its why I prefer Vue over Angular.',
published: '2022-05-24T22:07:20.000Z',
edited: '2022-05-24T22:07:20.000Z',
authors: ['splatkillwill'],
@@ -24,109 +24,35 @@ With a renderer like the one used by Angular, breaking down your UI into reusabl
To illustrate, take the following example in Vue:
```html
<template>
<h1>John Hammond No Expense Report</h1>
<my-table>
<my-row>
<my-header-cell>Category</my-header-cell>
<my-header-cell>Amount</my-header-cell>
</my-row>
<my-row>
<my-text-cell>Dinosaurs</my-text-cell>
<my-decimal-cell :value="999999999.99"></my-decimal-cell>
</my-row>
<my-row>
<my-text-cell>Park</my-text-cell>
<my-decimal-cell :value="999999999.99"></my-decimal-cell>
</my-row>
<my-row>
<my-text-cell>IT</my-text-cell>
<my-decimal-cell :value="5.27"></my-decimal-cell>
</my-row>
</my-table>
</template>
```
Which can produce:
![HTML table with rows and columns](./Capture1.JPG)
<iframe src="https://codesandbox.io/embed/async-leftpad-gjxmqv?codemirror=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark&highlights=1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="A properly formatted table with 'category' and 'amount' headers to your data."
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
Then if you tried the same in Angular:
```html
<div>
<h1>
John Hammond No Expense Report
</h1>
<my-table>
<my-row>
<my-header-cell>Category</my-header-cell>
<my-header-cell>Amount</my-header-cell>
</my-row>
<my-row>
<my-text-cell>Dinosaurs</my-text-cell>
<my-decimal-cell [value]="999999999.99"></my-decimal-cell>
</my-row>
<my-row>
<my-text-cell>Park</my-text-cell>
<my-decimal-cell [value]="999999999.99"></my-decimal-cell>
</my-row>
<my-row>
<my-text-cell>IT</my-text-cell>
<my-decimal-cell [value]="5.27"></my-decimal-cell>
</my-row>
</my-table>
</div>
```
![HTML table with rows and columns messed up](./Capture2.JPG)
<iframe src="https://codesandbox.io/embed/cranky-shadow-frukfg?codemirror=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark&highlights=2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="A malformed table that shows all data, including headers, horizontally instead of in a grid"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
What happened? Lets compare the custom components.
MyTextCell.vue
```vue
<template>
<td>
<slot></slot>
</td>
</template>
<script>
export default {
name: "MyTextCell",
};
</script>
<style scoped>
td {
border: 1px solid black;
text-align: left;
}
</style>
```
`MyTextCell.vue`
<iframe src="https://codesandbox.io/embed/async-leftpad-gjxmqv?codemirror=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FMyTextCell.vue&theme=dark&view=editor"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="MyTextCell.vue"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
text-cell.component.ts
```ts
import { Component } from "@angular/core";
@Component({
selector: "my-text-cell",
template: `
<td>
<ng-content></ng-content>
</td>
`,
styles: [
`
td {
border: 1px solid black;
text-align: left;
}
`
]
})
export class MyTextCellComponent {
}
```
`text-cell.component.ts`
<iframe src="https://codesandbox.io/embed/cranky-shadow-frukfg?codemirror=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Ftext-cell.component.ts&theme=dark&view=editor"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="text-cell.component.ts"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
They both look like they are just wrapping table detail (cell) tags but they render completely diffrent.