From Traditional Web to Modern Web

Transcript

1. modern web
2. few years ago 1st Modern Web
17. Our site already done for it
18. Our site already done for it
21. Traditional
29. Back to Space
38. <script src="//cdn.jsdelivr.net/npm/vue"></script>
39. yarn global add @vue/cli
40. var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) <div id="app"> {{ message }} </div>
43. Prod M Prod P Prod N Prod U Prod S Prod J Prod A Prod E Prod V
44. product-list.cshtml <div class="prod-list"> @foreach (var item in Model.Products) { <div class="@item.ProdCategoryClass"> @if (item.IsNew) { <div class="new-ribbon">@Resource.New</div> } <div class="prod-img prod-img@item.Id-@item.ImgLang" style="background-image: url(@Model.ImgCdnUrl/@item.IconPath?@Model.ImgVersion)" title="@item.Name"></div> <span class="prod-name" data-pid="@item.ProdId">@item.Name</span> <a href="/providers/@item.ProviderId">@item.Provider</a> </div> } </div>
45. <div class="prod-list"> @foreach (var item in Model.Products) { <div class="@item.ProdCategoryClass"> @if (item.IsNew) { <div class="new-ribbon">@Resource.New</div> } <div class="prod-img prod-img@item.Id-@item.ImgLang" style="background-image: url(@Model.ImgCdnUrl/@item.IconPath?@Model.ImgVersion)" title="@item.Name"></div> <span class="prod-name" data-pid="@item.ProdId">@item.Name</span> <a href="/providers/@item.ProviderId">@item.Provider</a> </div> } </div>
46. <div class="prod-list"> @foreach (var item in Model.Products) { <div class="@item.ProdCategoryClass"> @if (item.IsNew) { <div class="new-ribbon">@Resource.New</div> } <div class="prod-img prod-img@item.Id-@item.ImgLang" style="background-image: url(@Model.ImgCdnUrl/@item.IconPath?@Model.ImgVersion)" title="@item.Name"></div> <span class="prod-name" data-pid="@item.ProdId">@item.Name</span> <a href="/providers/@item.ProviderId">@item.Provider</a> </div> } </div>
47. <div class="prod-list"> @foreach (var item in Model.Products) { <div class="@item.ProdCategoryClass"> @if (item.IsNew) { <div class="new-ribbon">@Resource.New</div> } <div class="prod-img prod-img@item.Id-@item.ImgLang" style="background-image: url(@Model.ImgCdnUrl/@item.IconPath?@Model.ImgVersion)" title="@item.Name"></div> <span class="prod-name" data-pid="@item.ProdId">@item.Name</span> <a href="/providers/@item.ProviderId">@item.Provider</a> </div> } </div>
48. <div class="prod-list"> @foreach (var item in Model.Products) { <div class="@item.ProdCategoryClass"> @if (item.IsNew) { <div class="new-ribbon">@Resource.New</div> } <div class="prod-img prod-img@item.Id-@item.ImgLang" style="background-image: url(@Model.ImgCdnUrl/@item.IconPath?@Model.ImgVersion)" title="@item.Name"></div> <span class="prod-name" data-pid="@item.ProdId">@item.Name</span> <a href="/providers/@item.ProviderId">@item.Provider</a> </div> } </div>
51. Prod M Prod P Prod N Prod U Prod S Prod J Prod A Prod E Prod V
52. <div class="prod-list"> @foreach (var item in Model.Products) { <div class="@item.ProdCategoryClass"> @if (item.IsNew) { <div class="new-ribbon">@Resource.New</div> } <div class="prod-img prod-img@item.Id-@item.ImgLang" style="background-image: url(@Model.ImgCdnUrl/@item.IconPath?@Model.ImgVersion)" title="@item.Name"></div> <span class="prod-name" data-pid="@item.ProdId">@item.Name</span> <a href="/providers/@item.ProviderId">@item.Provider</a> </div> } </div>
54. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ Resource.New }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: { products: null }, created() { $.ajax('/api/products').done((data) => { this.products = data }); }, }); </script>
55. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ Resource.New }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: { products: null }, created() { $.ajax('/api/products').done((data) => { this.products = data }); }, }); </script>
56. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ Resource.New }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: { products: null }, created() { $.ajax('/api/products').done((data) => { this.products = data }); }, }); </script>
57. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ Resource.New }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: { products: null }, created() { $.ajax('/api/products').done((data) => { this.products = data }); }, }); </script>
58. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ Resource.New }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: { products: null }, created() { $.ajax('/api/products').done((data) => { this.products = data }); }, }); </script>
59. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ Resource.New }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: { products: null }, created() { $.ajax('/api/products').done((data) => { this.products = data }); }, }); </script>
60. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ Resource.New }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: { products: null }, created() { $.ajax('/api/products').done((data) => { this.products = data }); }, }); </script>
61. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ Resource.New }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: { products: null }, created() { $.ajax('/api/products').done((data) => { this.products = data }); }, }); </script>
62. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ Resource.New }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: { products: null }, created() { $.ajax('/api/products').done((data) => { this.products = data }); }, }); </script>
64. <div class="prod-list"> @foreach (var item in Model.Products) { <div class="@item.ProdCategoryClass"> @if (item.IsNew) { <div class="new-ribbon">@Resource.New</div> } else if (item.IsSoldOut) { <div class="sold-out-ribbon">@Resource.SoldOut</div> } <div class="prod-img prod-img@item.Id-@item.ImgLang" style="background-image: url(@Model.ImgCdnUrl/@item.IconPath?@Model.ImgVersion)" title="@item.Name"></div> <span class="prod-name" data-pid="@item.ProdId">@item.Name</span> <a href="/providers/@item.ProviderId">@item.Provider</a> </div> } </div>
66. <div class="prod-list"> @foreach (var item in Model.Products) { <div class="@item.ProdCategoryClass"> @if (item.IsNew) { <div class="new-ribbon">@Resource.New</div> } <div class="prod-img prod-img@item.Id-@item.ImgLang" style="background-image: url(@Model.ImgCdnUrl/@item.IconPath?@Model.ImgVersion)" title="@item.Name"></div> <span class="prod-name" data-pid="@item.ProdId">@item.Name</span> <a href="/providers/@item.ProviderId">@item.Provider</a> </div> } </div>
67. <div id="vue-scope" class="prod-list"> ~~~~~~ </div> <script> var vueApp = new Vue({ el: '#vue-scope', }); </script>
68. <div id="vue-scope" class="prod-list"> @foreach (var item in Model.Products) { <div class="@item.ProdCategoryClass"> @if (item.IsNew) { <div class="new-ribbon">@Resource.New</div> } <div class="prod-img prod-img@item.Id-@item.ImgLang" style="background-image: url(@Model.ImgCdnUrl/@item.IconPath?@Model.ImgVersion)" title="@item.Name"></div> <span class="prod-name" data-pid="@item.ProdId">@item.Name</span> <a href="/providers/@item.ProviderId">@item.Provider</a> </div> } </div>
69. <div id="vue-scope" class="prod-list"> @foreach (var item in Model.Products) { <div class="@item.ProdCategoryClass"> <div v-if="@item.IsNew.ToString().ToLower()" class="new-ribbon"> @Resource.New </div> <div class="prod-img prod-img@item.Id-@item.ImgLang" style="background-image: url(@Model.ImgCdnUrl/@item.IconPath?@Model.ImgVersion)" title="@item.Name"></div> <span class="prod-name" data-pid="@item.ProdId">@item.Name</span> <a href="/providers/@item.ProviderId">@item.Provider</a> </div> } </div>
70. <div id="vue-scope" class="prod-list"> @foreach (var item in Model.Products) { <div class="@item.ProdCategoryClass"> <div v-if="@item.IsNew.ToString().ToLower()" class="new-ribbon"> @Resource.New </div> <div class="prod-img prod-img@item.Id-@item.ImgLang" style="background-image: url(@Model.ImgCdnUrl/@item.IconPath?@Model.ImgVersion)" title="@item.Name"></div> <span class="prod-name" data-pid="@item.ProdId">@item.Name</span> <a href="/providers/@item.ProviderId">@item.Provider</a> </div> } </div> v-if="true" or v-if="false"
71. <div id="vue-scope" class="prod-list"> @foreach (var item in Model.Products) { <div class="@item.ProdCategoryClass"> <div v-if="@item.IsNew.ToString().ToLower()" class="new-ribbon"> @Resource.New </div> <div v-else-if="@item.IsSoldOut.ToString().ToLower()" class="sold-out-ribbon"> @Resource.SoldOut </div> <div class="prod-img prod-img@item.Id-@item.ImgLang" style="background-image: url(@Model.ImgCdnUrl/@item.IconPath?@Model.ImgVersion)" title="@item.Name"></div> <span class="prod-name" data-pid="@item.ProdId">@item.Name</span> <a href="/providers/@item.ProviderId">@item.Provider</a> </div> } </div>
73. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">@Resource.New</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(@Model.ImgCdnUrl/${item.iconPath}?@Model.ImgVersion)`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: { products: null }, created() { $.ajax('/api/products').done((data) => { this.products = data }); }, }); </script>
74. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">@Resource.New</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(@Model.ImgCdnUrl/${item.iconPath}?@Model.ImgVersion)`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: { products: null }, created() { $.ajax('/api/products').done((data) => { this.products = data }); }, }); </script>
76. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">@Resource.New</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: @Html.Raw(JsonConvert.SerializeObject(Model)), }); </script>
77. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">@Resource.New</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: @Html.Raw(JsonConvert.SerializeObject(Model)), }); </script> “sensitive data”
78. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">@Resource.New</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: @Html.Raw(JsonConvert.SerializeObject(Model)), }); </script> “sensitive data” public class DemoViewModel { [JsonIgnore] public string SensitiveData }
81. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">@Resource.New</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: @Html.Raw(JsonConvert.SerializeObject(Model)), }); </script>
82. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ _resource.new }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ mixins: [$resource], el: '#vue-scope’, data: @Html.Raw(JsonConvert.SerializeObject(Model)), }); </script> <script> var $resource = { data: function() { return { _resource: { new: "@Resource.New", }, }; }, }; </script>
83. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ _resource.new }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ mixins: [$resource], el: '#vue-scope’, data: @Html.Raw(JsonConvert.SerializeObject(Model)), }); </script> <script> var $resource = { data: function() { return { _resource: { new: "@Resource.New", }, }; }, }; </script>
84. <div id="vue-scope" class="prod-list"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ _resource.new }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </div> <script> var vueApp = new Vue({ mixins: [$resource], el: '#vue-scope’, data: @Html.Raw(JsonConvert.SerializeObject(Model)), }); </script> <script> var $resource = { data: function() { return { _resource: { new: "@Resource.New", }, }; }, }; </script>
87. <div id="vue-scope" class="prod-list"> <item-component v-for="item in products" :item="item" :img-cdn-url="ImgCdnUrl" :img-version="ImgVersion" /> </div> <script> var vueApp = new Vue({ el: '#vue-scope’, data: @Html.Raw(JsonConvert.SerializeObject(Model)), }); </script>
88. <template id="item-template"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ _resource.new }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </template> <script> var ItemComponent = Vue.component('item-component', { template: '#item-template', mixins: [$resource], props: ['item', 'imgCdnUrl', 'imgVersion'], }); </script>
89. <template id="item-template"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ _resource.new }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </template> <script> var ItemComponent = Vue.component('item-component', { template: '#item-template’, mixins: [$resource], props: ['item', 'imgCdnUrl', 'imgVersion'], }); </script>
90. <template id="item-template"> <div v-for="item in products" :class="item.prodCategoryClass"> <div v-if="item.isNew" class="new-ribbon">{{ _resource.new }}</div> <div :class="['prod-img', `prod-img${item.id}-${item.imgLang}`]" :style="`background-image: url(${imgCdnUrl}/${item.iconPath}?${imgVersion})`" :title="item.name"></div> <span class="prod-name" :data-pid="item.prodId">{{ item.name }}</span> <a :href="`/providers/${item.providerId}`">{{ item.provider }}</a> </div> </template> <script> var ItemComponent = Vue.component('item-component', { template: '#item-template’, mixins: [$resource], props: ['item', 'imgCdnUrl', 'imgVersion'], }); </script>
101. jr@neo.kn