SlideShare a Scribd company logo

Cross Platform Angular 2 and TypeScript Development

•Download as PPTX, PDF•
•
Jeremy Likness
Jeremy Likness

Jeremy Likness explains why Angular is a powerful front end web technology, then demonstrates a cross-platform approach to building Angular 2 apps using NodeJs, Visual Studio Code, and TypeScript.

Related slideshows

PyBCN 2020
PyBCN 2020PyBCN 2020
PyBCN 2020
 
Build HTML5 Sites/Apps with Kendo UI Core
Build HTML5 Sites/Apps with Kendo UI CoreBuild HTML5 Sites/Apps with Kendo UI Core
Build HTML5 Sites/Apps with Kendo UI Core
 
SoftServe - "ASP.NET MVC як наступний крок у розвитку технології розробки Web...
SoftServe - "ASP.NET MVC як наступний крок у розвитку технології розробки Web...SoftServe - "ASP.NET MVC як наступний крок у розвитку технології розробки Web...
SoftServe - "ASP.NET MVC як наступний крок у розвитку технології розробки Web...
 
1 of 13
X-Plat Development of Angular 2 with TypeScript @JeremyLikness
Swag! • For chance to win … • Retweet an @iVisionAtl session reminder, or • Take a picture of this session and tweet with #CodeStock and @ivisionAtl, or • Retweet this video
About iVision A privately held, IT consulting firm headquartered in Midtown, Atlanta. At iVision, we seek to understand our clients’ business first. We work with clients to architect, transform and support their technology — enabling them to realize their vision of a better tomorrow. Jeremy Likness| Director of App Dev https://github.com/JeremyLikness http://bit.ly/coderblog The iVision Difference  Engineering Expertise  White Glove Service  Delivery Assurance  Flexible Business Model  Proven Partner Ecosystem  Culture & People About iVision
Agenda • Pre-requisites • Getting Started / Angular-CLI • Why? • Demo • Q&A
Getting Started https://nodejs.org/ https://code.visualstudio.com/ https://angular.io/
Angular-CLI npm install -g angular-cli ng new my-project cd my-project ng serve
Why Angular? • Three D’s of Web Development: http://bit.ly/3dofweb • Declarative vs. Imperative • Data-binding • Dependency Injection • Components and Templates • Code Reuse • Parallel Development • Testability • Performance Source: http://stackoverflow.com/research/developer-survey-2016
Why Angular 2? • Small footprint (45k – smaller than Angular 1.x) • Easy to read, understand, and learn declarative interface • Improved performance (5x rendering in all scenarios over Angular 1.x) • Great CSS management (CSS per component) • Module prefixing (easier to move related files in large projects) • Server-side rendering with Angular universal • Testing support • Advanced scaffolding with Angular-CLI • TypeScript (stay tuned…)
Why TypeScript? (1 of 2) • “I cannot say I have ever been a Microsoft fan but TypeScript has ‘softened’ me, it is easily one of the best web technologies to arrive in the past 3 years.” - https://tedpatrick.com/2013/06/25/7-months-with-typescript/ • “Overall, TypeScript is wonderful to work with. It helps developers catch errors quickly, adds types and type- checking, and documents your progress so that if someone else wants to contribute, or you need to return to your work months later, you can easily pick up where you left off.” - http://www.livetiles.nyc/blog/typescript-a-digital-workplace-success-story/ • “… we use TypeScript not because we’re part of Microsoft, but because we find tremendous value by improving our productivity and keeping our quality high which together allow us to move much faster.” - https://medium.com/@delveeng/why-we- love-typescript-bec2df88d6c2#.pzp9xp7an
Why TypeScript? (2 of 2) http://bit.ly/typescriptvid
What time is it?
• Serve, Test, E2E, & Build • Generate a service • DI • View models • Bindings • Local variables • Events • CSS • Components • Directives • Added module
Questions? http://ivision.com/author/jlikness https://twitter.com/jeremylikness https://linkedin.com/in/jeremy.likness http://stackoverflow.com/users/228918/jeremy-likness https://github.com/JeremyLikness http://csharperimage.jeremylikness.com/

More Related Content

Cross Platform Angular 2 and TypeScript Development

  • 1. X-Plat Development of Angular 2 with TypeScript @JeremyLikness
  • 2. Swag! • For chance to win … • Retweet an @iVisionAtl session reminder, or • Take a picture of this session and tweet with #CodeStock and @ivisionAtl, or • Retweet this video
  • 3. About iVision A privately held, IT consulting firm headquartered in Midtown, Atlanta. At iVision, we seek to understand our clients’ business first. We work with clients to architect, transform and support their technology — enabling them to realize their vision of a better tomorrow. Jeremy Likness| Director of App Dev https://github.com/JeremyLikness http://bit.ly/coderblog The iVision Difference  Engineering Expertise  White Glove Service  Delivery Assurance  Flexible Business Model  Proven Partner Ecosystem  Culture & People About iVision
  • 4. Agenda • Pre-requisites • Getting Started / Angular-CLI • Why? • Demo • Q&A
  • 6. Angular-CLI npm install -g angular-cli ng new my-project cd my-project ng serve
  • 7. Why Angular? • Three D’s of Web Development: http://bit.ly/3dofweb • Declarative vs. Imperative • Data-binding • Dependency Injection • Components and Templates • Code Reuse • Parallel Development • Testability • Performance Source: http://stackoverflow.com/research/developer-survey-2016
  • 8. Why Angular 2? • Small footprint (45k – smaller than Angular 1.x) • Easy to read, understand, and learn declarative interface • Improved performance (5x rendering in all scenarios over Angular 1.x) • Great CSS management (CSS per component) • Module prefixing (easier to move related files in large projects) • Server-side rendering with Angular universal • Testing support • Advanced scaffolding with Angular-CLI • TypeScript (stay tuned…)
  • 9. Why TypeScript? (1 of 2) • “I cannot say I have ever been a Microsoft fan but TypeScript has ‘softened’ me, it is easily one of the best web technologies to arrive in the past 3 years.” - https://tedpatrick.com/2013/06/25/7-months-with-typescript/ • “Overall, TypeScript is wonderful to work with. It helps developers catch errors quickly, adds types and type- checking, and documents your progress so that if someone else wants to contribute, or you need to return to your work months later, you can easily pick up where you left off.” - http://www.livetiles.nyc/blog/typescript-a-digital-workplace-success-story/ • “… we use TypeScript not because we’re part of Microsoft, but because we find tremendous value by improving our productivity and keeping our quality high which together allow us to move much faster.” - https://medium.com/@delveeng/why-we- love-typescript-bec2df88d6c2#.pzp9xp7an
  • 10. Why TypeScript? (2 of 2) http://bit.ly/typescriptvid
  • 12. • Serve, Test, E2E, & Build • Generate a service • DI • View models • Bindings • Local variables • Events • CSS • Components • Directives • Added module