Ultra-modern web development (for.NET

What you should know about me: I bring context

“I may be the only author who has written more books than he has read” –Garth Marenghi, author

Ultra-Modern, Cutting Edge Web Development Demo

Goal: Show you what you can use

Goal: Show you how easy this stuff is

Goal: Show you how much better the JavaScript experience is nowadays

Goal: Show you React.js

Goal: Show you the fads and trends

Demo: ultra-stable web development in.NET

Classic web development, in review: It’s simple It’s stable It’s fast* Ɵ We’ll talk about the negatives later

Takeaway: if you don’t need AJAX, don’t*

Demo: jQuery-era web development (~2006-present)

jQuery-era web development, in review: Vast improvement over raw JavaScript (IE5-era) Fast* Ɵ bad* for complex UI Ɵ User experience is bad*

Let’s start the talk

Demo: split into a frontend and a backend

Emphasis: an army of tooling works with HTML, JavaScript and CSS

Aside: Defining the term “full stack developer”

Full stack development: Designers and frontend engineers can now participate in development* The web’s huge ecosystem is now ours—this means more of everything

Demo: adopt the newest JavaScript

Newest JavaScript: Has new, C#-alike syntax which is particularly good for C# developers Ɵ don’t use the “class” keyword*

Demo: add a build system for the frontend

Building your frontend assets: Enables you to apply quality control via ESHint, “use strict”, unit tests Enables transpiling, minifying and packing of assets, Composability (treat build steps as LEGO™ blocks)

Demo: React.js

React.js: Small learning surface (comparable to Knockout.js) Fast So hot right now* One-way databinding plus Flux is a “pit of success” for complex apps Ɵ still in the hype cycle

Final demo: Server-side JavaScript rendering

Server-side JavaScript rendering: Fast* SEO-friendly No need to manually harmonize Razor views with client-side JavaScript templates Even easier in the future* Ɵ Which JavaScript runs on the server, and which runs on the client?* Ɵ I’m afraid to use this in production at work*

“Ultra-modern” versus “Ultra-stable”: Just as easy* As fast on the page load Faster (AJAX vs postbacks) Enables your frontend engineers and designers Ɵ Not as easy* Ɵ The JavaScript community*

Summary: Tools (Page 1 of 2) Babel.js for ES6 (ES2015) React.js from Facebook, + Redux, the hottest Flux framework* Gulp.js for build ESHint and “use strict”; for code quality Node.js/npm for compiling the frontend JSPM for browser modules

Summary: Tools (Page 2 of 2) Every text editor, IDE, browser dev tool, and all the available training for HTML, JavaScript and CSS PhantomJS for server-side JavaScript rendering

Summary: Concepts AJAX-style web development is easy now* Free your HTML from ASP.NET’s bitter grasp* Emphasis: don’t blindly accept the ASP.NET default template Server-side is boring (stable)* React, Ember, Aurelia, Angular – choose one Decide whether to bet on TypeScript or not If yes, use Aurelia or Angular 2 If no, use “vanilla JavaScript” solutions such as React or Ember Think about what the emergence of “full stack developers” means Specialized, high-quality frontend stack developers You will have to learn this stuff to remain a “full stack” developer You can still build web apps without any JavaScript, or you can build JavaScript- heavy web apps. Either way, stop using jQuery*

AJAX-style web development is easy now—it’s not as much about what more you can do, it’s how little extra effort it is

Free your HTML from ASP.NET’s bitter grasp*

Don’t blindly accept the ASP.NET default template – consciously split into a frontend and a backend

Restated: Stop writing Razor templates*

Server-side is boring (stable)*

React, Ember, Aurelia, Angular – choose one

Decide whether to bet on TypeScript or not: If yes, use Aurelia or Angular 2 If no, use “vanilla JavaScript” solutions such as React or Ember

Think about what the emergence of “full stack developers” means: Specialized, high-quality frontend engineers exist now! You will have to learn this stuff to remain a “full stack” developer

You can EITHER build web apps without any JavaScript, OR you can build JavaScript- heavy web apps. Either way, stop using jQuery*

Summary: Concepts AJAX-style web development is easy now* Free your HTML from ASP.NET’s bitter grasp* Emphasis: don’t blindly accept the ASP.NET default template Server-side is boring (stable)* React, Ember, Aurelia, Angular – choose one Decide whether to bet on TypeScript or not If yes, use Aurelia or Angular 2 If no, use “vanilla JavaScript” solutions such as React or Ember Think about what the emergence of “full stack developers” means Specialized, high-quality frontend stack developers You will have to learn this stuff to remain a “full stack” developer You can still build web apps without any JavaScript, or you can build JavaScript- heavy web apps. Either way, stop using jQuery*

Community discussion: airing of grievances

Questions?

Thank