31
Kevin Grossnicklaus and a “Lot of Web Development Stuff” Presenter: Kevin Grossnicklaus

ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Embed Size (px)

Citation preview

Page 1: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Kevin Grossnicklaus and a “Lot of Web Development Stuff”

Presenter: Kevin Grossnicklaus

Page 2: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Contact Information

Kevin GrossnicklausEmail: [email protected] Website: www.architectnow.net Twitter: @kvgros / @architectnowLinked In: https://www.linkedin.com/in/kvgros

Page 3: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

One Simple Request

•Share•Tweet •Facebook•LinkedIn•Whatever

Page 4: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Expectations

Page 5: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Expectations

• Why am I here?• How deep are we going to get?

Page 6: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Agenda

Page 7: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Today’s Agenda

• Technologies, Architecture, Terminology• Solution Setup and Structure• Data Access Strategies• Unit Testing• Web Application Structure• ASP.NET MVC Overview• API Development• Lunch• JavaScript Primer• Introduction to TypeScript• AngularJS• Responsive UI Discussion• Bringing it All Together• Resources• Deep Breath and Relax

Page 8: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Presentation Direction

Server Client

Page 9: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Let’s Roll

Page 10: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

My Environment

• MacBook Pro• El Capitan• 16g Memory• 512g SSD• Parallels

• Windows 10• Visual Studio 2015

• Web Essentials

Page 11: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Architecture

• What type of applications are we looking to build?

• What is the best web architecture available?

• Is what I see today going to be better than what we do already?

• What if I like pieces of what I see but not all of it?

Page 12: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Technologies

• What technologies do you recommend/use?

• Do these technologies fit every scenario?

• Can we pick and choose and mix and match?

Page 13: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Today’s Content

• Presentations = On My Blog Tomorrow

http://www.architectnow.net/blog• Anything Live Coded In Class = Shared Later via Email Upon Request

[email protected]

• Larger Project Used as Demonstration = Available Now on GitHub

https://github.com/ArchitectNow/TypeScript.Demo

Page 14: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Terminology

Page 15: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Terminology

• Models• Entity• Repositories• Controllers• View• Services• Utilities

• Others as we go

Page 16: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Solution Setup

Page 17: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Data Access Strategies

Page 18: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Unit Testing

Page 19: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Web Application Structure

Page 20: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

ASP.NET MVC Overview

Page 21: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

API Development

Page 22: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Lunch

Page 23: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

JavaScript Primer

Page 24: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Introduction to TypeScript

Page 25: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

AngularJS

Page 26: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Responsive UI Discussion

Page 27: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Bringing It All Together

Page 28: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Resources

Page 29: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Final Thoughts

Page 30: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

Contact Information

Kevin GrossnicklausEmail: [email protected] Website: www.architectnow.net Twitter: @kvgros / @architectnowLinked In: https://www.linkedin.com/in/kvgros

Page 31: ArchitectNow: Building Rich Web Apps with WebAPI, AngularJS, and TypeScript

One Final Request

•Share•Tweet •Facebook•LinkedIn•Whatever