CC 2015 Single Page Applications for the ASPNET Developer
Download as PPTX, PDF•3 likes•3,132 views
The document discusses Single Page Applications (SPAs) for ASP.NET developers, emphasizing the shift of application logic from server to client and the role of modern frameworks like AngularJS and TypeScript. It highlights the benefits of SPAs, such as fluidity and responsiveness, while also addressing the challenges and the necessity of JavaScript. The presentation includes references to tools and frameworks that facilitate SPA development, aiming to empower developers to create scalable web applications.
CC 2015 Single Page Applications for the ASPNET Developer
- 1. Single Page Applications for the ASP.NET Developer using AngularJS, TypeScript, and WebAPI Orlando Code Camp 2015 Allen Conway Senior Consultant – Magenic 03.28.15
- 2. 2 Intro »Allen Conway › Blog: http://www.AllenConway.net › Twitter: @AllenConway, http://www.twitter.com/AllenConway › GitHub: https://github.com/AllenConway › Email: [email protected]
- 3. 3 »Single Page Applications › What exactly is a SPA? › Why SPAs are viable? › SPAs vs. ASP.NET »TheWeb Stack › AngularJS + JS/TypeScript › Responsive Web Design / Bootstrap »The Server Stack › Web API › Entity Framework › SQL Server Target Objective
- 4. 4 Let’s get things rolling “To say that SPA development is the future is an extreme understatement” Long Le, MSDN Magazine (March 2014) “Yep – I agree.” Allen Conway (present day)
- 5. 5 »Single Page Application »HTML web page “shell” is sent once to the browser »What’s with the ‘Single Page’ – Do I have to do everything in 1 page? »“Modern JavaScript Applications” What exactly is a SPA??
- 6. 6 »Shift in application logic from the server to the client ›UI and application logic is now done in the browser »How HTML is delivered ›ASP.NET web apps merge data with HTML before delivering to the client »Server’s main responsibility: Data »Presentation Layer = JavaScript MV* Frameworks How are SPAs different from ASP.NET MVC or Webforms?
- 7. 7 Where did we come from? Services / Data Code-Behind Static DOM Static DOM Controller Static DOM Controller Static/Dynamic DOM
- 8. 8 Single Page Applications Services / Data Master Layout Controller Model View (Dynamic DOM) Renderer Services
- 9. 9 »Lean, mean, fighting machines! »SPAs are fluid and responsive »Narrowing the line between desktop and web from UX perspective »Mature browsers › HTML5 › CSS3 › JS Processing »SPA Frameworks follow familiar patterns »Capable of Enterprise development Why SPAs are… AWESOME
- 10. 10 »Take notice: JavaScript is required »Sea of JS frameworks for SPAs ›Frameworks are volatile »Years of working almost exclusively in managed code on the server (C#/VB.NET) ›Mindset of doing so much on the client »Difference in the way of thinking about web design Disadvantages and Challenges of SPAs
- 11. 11 »HTML5/CSS3 Responsive Design »AngularJS + JS/TypeScript »ASP.NETWeb Pages (not MVC!) »ASP.NETWeb API »Entity Framework »SQL Server Bowling League Manager SPA Technology Stack
- 12. 12 »Further elevate your code :: eyeball ratio »Foot in the door for mobile devices »Core technique: CSS Media Queries (CSS3) »Bootstrap ›HTML, CSS, and JS framework ›UI-Bootstrap »Invest in your base template »Tools for testing Responsive Design Responsive Design
- 13. 13 League Bowling Manager – Responsive Design DEMO
- 14. 14 » Let’s not sugar coat it – we need JS » Object.prototype.__proto__ » Follow mainstream JS patterns › Modules (Module & Revealing Module Patterns) › Closures › Promises » Leverage JS SPA frameworks and Libraries › AngularJS › Durandal › Aurelia › Backbone › Ember JavaScript and SPAs
- 15. 15 »Complete client side MVW framework for creating SPAs »Compliments the server »Originally started at Google, now OSS »Declarative style of programming ›Manipulating the DOM »Imperative style of programming ›Expressing logic »Easy to use and learn AngularJS
- 16. 16 »Comprehensive framework includes: ›Data binding ›Directives ›Templates/Views ›Controllers ›Models ›Services −Custom and Provided ›Dependency Injection AngularJS Fundamentals
- 17. 17 »Type-safe, statically-verified JavaScript »IntelliSense! »Familiar paradigms »Leverage your C# classes »TypeScript with AngularJS › Module = app › Class = controller, service, etc. »TypeLITE › GeneratesTypeScript definitions from .NET classes TypeScript
- 18. 18 »RESTful services »We can still use C#/VB.NET on the server! »Server holds the cards to providing data to the client »Share same business process to multiple consumers »MVC developer-friendly »AJAX-friendly ASP.NET WebAPI
- 19. 19 League Bowling Manager – AngularJS, TypeScript, and WebAPI Demo
- 20. 20 »The big payoff – fast, fast, fast and don’t forget… efficient! »Use ‘Network’ tab in debugging tools › Request count › Size › Time »Techniques › Caching › Bundling / Minification SPA Performance
- 21. 21 »Chrome, IE, Firefox and Safari all have their own developer tools »Chrome has a fantastic set of developer tools »Search for scripts using Ctrl + O »Ability to debug JavaScript and seek out errors easily »Ability to debugAsync calls »Manipulate expressions real time to prevent browser refresh Learning to befriend the Developer Tools
- 22. 22 » League Bowling Manager › https://github.com/AllenConway/BowlingSPA » SPA Basic Template › https://github.com/AllenConway/SPABasicTemplate » Plunker › http://plnkr.co/ » AngularJS API Docs › https://docs.angularjs.org/api » AngularJSTraining › http://egghead.io/ › http://thinkster.io/ › http://www.pluralsight.com/ » Bootstrap › http://getbootstrap.com/ » UI Bootstrap (Angular directives) › http://angular-ui.github.io/bootstrap/ Useful References
- 23. 23 »This is just the Start! »Have references handy »Try things on a small scale »Become familiar with all the pieces »SPAs and ModernWeb Applications ›way of thinking/designing vs. technologies that implement them »SPAs can create large scalable web applications Not a Wrap Up!
- 24. 24 Questions Thank you for attending Orlando Code Camp 2015!