Ultra-modern
web development
(for .NET developers)
https://github.com/pseale/presentation-modern-dotnet-webdev/
@pseale
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*
 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 JavaScriptheavy 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 JavaScriptheavy web apps. Either way, stop using jQuery*
Community discussion: airing of
grievances
Questions?
Thank You!
@pseale