1. Ultra-modern web development (for.NET developers) @pseale https://github.com/pseale/presentation-modern-dotnet-webdev/

2. What you should know about me: I bring context

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

4. Ultra-Modern, Cutting Edge Web Development Demo

5. Goal: Show you what you can use

6. Goal: Show you how easy this stuff is

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

8. Goal: Show you React.js

9. Goal: Show you the fads and trends

10. Demo: ultra-stable web development in.NET

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

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

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

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

15. Let’s start the talk

16. Demo: split into a frontend and a backend

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

18. Aside: Defining the term “full stack developer”

19. 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

20. Demo: adopt the newest JavaScript

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

22. Demo: add a build system for the frontend

23. 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)

24. Demo: React.js

25. 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

26. Final demo: Server-side JavaScript rendering

27. 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*

28. “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*

29. 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

30. 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

31. 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*

32. 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

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

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

35. Restated: Stop writing Razor templates*

36. Server-side is boring (stable)*

37. React, Ember, Aurelia, Angular – choose one

38. 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

39. 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

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

41. 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*

42. Community discussion: airing of grievances

43. Questions?

44. Thank You! @pseale