ASP.NET Core Tag Helpers

About Me Web developer since 1995 Pluralsight Author 3rd Degree Black Belt, Tae Kwon Do ASP.NET MVP boedie@outlook.com @boedie weblogs.asp.net/boedie

ASP.NET Core Open source and cross platform No more System.Web.dll! Full .NET Framework, .NET Core (Windows, Mac, Linux) No more System.Web.dll! MVC/Web API unified (no Web Forms) Modular wwwroot folder Tag Helpers Cross platform Windows Mac Linux Web Forms is NOT in .NET Core (use Full .NET Framework) wwwroot – only files from this folder will be served

Razor View engine for ASP.NET MVC HTML with server side code fragments @ prefix for code blocks Visual Studio IntelliSense .cshtml (C#), .vbhtml (VB)

Tag Helpers “Enable server-side code to participate in creating and rendering HTML elements in Razor files” Goal is to look much more like HTML Pascal-cased class and property names for tag helpers are translated into their “lower kebab” case Look like HTML – really helps designers Microsoft.AspNetCore.Razor.Tools Purple font on elements and attributes impacted by tag helper (needed to install “Razor Language Services”) Compared to web server controls “Don’t own the element they’re associated with; they simply participate in the rendering of the element and content” “Tag Helpers can modify the tag and content of HTML elements that they’re scoped to, but don’t directly modify anything else on a page” No DOM

Built In Tag Helpers <environment> <cache> <distributed-cache> Attributes Form Link and script Image Anchor <distributed-cache> supports SQL Server or Redis

Custom Tag Helpers Derive from TagHelper Implement ITagHelper, Target elements based on element name or attributes Visual Studio “Razor Tag Helper” template Target elements using [HtmlTargetElement] or match based on class name (up to TagHelper) Add to _ViewImports.cshtml or individual view files

Images http://httparchive.org/interesting.php#bytesperpage 63% of average page weight is images (3/1/2016), 59% in Nov 2010 Average web page has 100 requests, 54 of which are images (http://httparchive.org/trends.php) Alexa Top 1,000,000 Sites (http://www.alexa.com/topsites) JPG (46%), PNG (29%), GIF (23%), SVG (1%), WebP (0%) http://httparchive.org/interesting.php#bytesperpage

Lazy Load Images jQuery plugin and modified HTML to request images as scroll down data-original – set to image URL src – set to 1x1 clear pixel image Pages with lots of images only load those “above the fold” http://www.appelsiini.net/projects/lazyload

Responsive Image Goals Avoid images if possible CSS 3 (gradients, rounded corners, etc.) Web Fonts Icon Fonts Vector images if possible (SVG) Want to efficiently provide the most appropriate image for the design and device Web fonts – often used images in the past to get specific fonts

Responsive Image Techniques CSS 3 Media Queries JavaScript Server Image Adaptation New Image Format? … <picture> <img srcset… Client Hints CSS 3 Media Queries Background images Image-set( ) – not well implemented yet (be like using “srcset” for bg images) http://caniuse.com/#search=image-set JavaScript approaches had various choices for “src” (mobile version, 1x1 pixel, desktop, etc.) that cause some level of double download (and rely on JavaScript support) “Lookahead pre-parser” starts to request images before CSS and JavaScript downloads are completed… Steve Souders - “preloading is the single biggest performance improvement browsers have ever made.” Client Hints - http://caniuse.com/#search=client%20hints

<picture> http://tinyurl.com/j5zsmf2 Use Cases (http://usecases.responsiveimages.org) “Art Direction” Image Formats Want specific control over what is loaded… https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element Art Direction – “change an image so it can be targeted towards the features of a particular display” (often cropping) Order of sources matter “We’re progressively enhancing the img by wrapping it in a picture.” (so styles and such go against img)

<img srcset… http://tinyurl.com/m894jsw Use Cases (http://usecases.responsiveimages.org) Resolution/Viewport Device-pixel-ratio Rest Inform browser about image widths and let it do what is “best”… https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset Resolution/Viewport – most common case to show same image at various sizes Device-pixel-ratio – 1, 1.5, 2, 3 Sizes – tells the browser roughly how big the image will be (since don’t know rendered size yet), unfortunate need that in markup… “unless the image source matches exactly the size that the image is being displayed in the page, it is always going to be too big. There is always going to be an opportunity to optimize it further by providing a smaller image” (Jason Grigsby) Eventually do network connection speed detection or user preferences??

Picturefill http://scottjehl.github.io/picturefill/ Polyfill for srcset and <picture> http://caniuse.com/#search=srcset

Multiple Tag Helpers Multiple tag helpers can apply to the same element Order – runs applicable tag helpers lowest to highest value Code as if previous tag helper may have already modified…

Miscellaneous @tagHelperPrefix Opt out using “!” Can change how they look (Tools > Options > Environment > Fonts and Colors) 3rd party tag helpers (Telerik, DevExpress, Component One, …) Opt out using ! <!div></!div>

ASP.NET Core 2.0 TagHelperComponent <environment> - include/exclude

Resources github.com/aspnet www.asp.net/core https://docs.asp.net/en/latest/mvc/views/tag-helpers/index.html https://www.pluralsight.com/courses/responsive-web-images

Questions boedie@outlook.com @boedie weblogs.asp.net/boedie