LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-10 04:22:06 +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', title: 'Why I prefer Vue over Angular: DOM Pollution',
description: 'See why not all frontend SPA frameworks render the same and what you need to be aware of when using Angular', 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', published: '2022-05-24T22:07:20.000Z',
edited: '2022-05-24T22:07:20.000Z', edited: '2022-05-24T22:07:20.000Z',
authors: ['splatkillwill'], 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: To illustrate, take the following example in Vue:
```html <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"
<template> style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
<h1>John Hammond No Expense Report</h1> title="A properly formatted table with 'category' and 'amount' headers to your data."
<my-table> sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
<my-row> ></iframe>
<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)
Then if you tried the same in Angular: Then if you tried the same in Angular:
```html <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"
<div> style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
<h1> title="A malformed table that shows all data, including headers, horizontally instead of in a grid"
John Hammond No Expense Report sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
</h1> ></iframe>
<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)
What happened? Lets compare the custom components. What happened? Lets compare the custom components.
MyTextCell.vue `MyTextCell.vue`
```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"
<template> style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
<td> title="MyTextCell.vue"
<slot></slot> sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
</td> ></iframe>
</template>
<script>
export default {
name: "MyTextCell",
};
</script>
<style scoped>
td {
border: 1px solid black;
text-align: left;
}
</style>
```
text-cell.component.ts `text-cell.component.ts`
```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"
import { Component } from "@angular/core"; style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="text-cell.component.ts"
@Component({ sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
selector: "my-text-cell", ></iframe>
template: `
<td>
<ng-content></ng-content>
</td>
`,
styles: [
`
td {
border: 1px solid black;
text-align: left;
}
`
]
})
export class MyTextCellComponent {
}
```
They both look like they are just wrapping table detail (cell) tags but they render completely diffrent. They both look like they are just wrapping table detail (cell) tags but they render completely diffrent.