Ultra-modern web development (for.NET developers) @pseale

Ultra-modernweb development

(for .NET developers)

@psealehttps://github.com/pseale/presentation-modern-dotnet-webdev/

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 simpleIt’s stableIt’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* 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 You!

@pseale