Angular From The Trenches - 10 Lessons
•Als PPTX, PDF herunterladen•
1 gefällt mir•454 views
The 10 questions any developer will need to ask when starting a new Angular project. Through these questions we discuss the lessons learnt at SSW building many single page apps with Angular.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Angular From The Trenches - 10 Lessons
Ähnlich wie Angular From The Trenches - 10 Lessons (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Angular From The Trenches - 10 Lessons
- 2. Software Architect Duncan Hunter #DuncHunter • .NET Developer • Angular specialist • Rock climber Join the Conversation #DevSuperPowersIP @DuncHunter
- 3. “I want our front end code to be as solid as our back end code”
- 4. 6. Will you use a task runner? 5. Bower and NPM vs Nuget? Agenda 2. Single page app or mini SPAs? 1. Should you use Angular? 3. How to structure your application? 4. Will you use TypeScript or ES6? 7. How will you secure your application? 8. Which 3rd party libraries will you use? 9. How will you get Angular 2.0 ready? 10. How to get and stay up to date?
- 5. A brief history of frontend development 1995 - Introduction to JavaScript 1997 - ECMA Script 2002 - XMLHttpRequest (XHR) 2004 - Google Maps - AJAX 2006 - JQuery 2008 - Chrome browser and V8 Engine – The web gets faster 2009 - Nodejs 2010 - Knockout JS 2011 - Angular JS by Google 2015-16 – Angular 2.0 and ES6 Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan
- 6. Too much inline JavaScript No separation of concerns Poor code reuse Create less responsive applications = Difficult to maintain with too many page refreshes! Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan Life before frontend frameworks
- 7. Should you use Angular?
- 8. Routing Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 1.1 Complete Solution
- 9. MV* structure and guidance View ViewModel Controller & Model HTML (template) DOM Directives $Scope POJO POJO Controllers Services 1.1 Complete Solution
- 10. Binding data to the DOM is painful Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan
- 11. Two way binding Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 1.1 Complete Solution HTML Controller
- 12. Server communication $http service $http.get(‘api/getSomething’).then(successCallBack); $http interceptors $httpBackend – unit testing Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 1.1 Complete Solution
- 13. Directives – custom components Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 1.1 Complete Solution
- 14. Dependency Injection Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 1.1 Complete Solution
- 15. 1.2 Popularity Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan
- 16. 1.3 Quality Code - designed to be testable Easy to make unit tests or spec files ngMock Great tools - Protractor, Karma and Jasmine/Mocha Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan
- 17. SEO based business model Team experience You have a simple UI that is easier to scaffold with MVC Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 1.4 When to not use Angular?
- 18. Save time and money = $ Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan
- 19. Single page app or mini SPAs
- 20. Greenfield You have an existing API Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 2.1 When to do a full SPA with no MVC?
- 21. Existing .NET MVC application Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 2.1 When to do a mini SPA var exportUrl = '@Url.Action("LegalFormDetailExport")';
- 22. How will you structure your application?
- 23. A: The stuff that is difficult to change. What is architecture?
- 24. 3.1 Which folder structure? vs Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan
- 25. Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan
- 26. 3.2 Style Guides Do you use an Angular style guide
- 27. Angular 2 None with TypeScript Excess unnecessary code Becomes redundant fast Fast Existing structure to copy Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 3.3 Why we do not use templates at SSW
- 28. Will you use TypeScript or ES6?
- 29. Will you use TypeScript or ES6 with Angular 2.0?
- 30. What is Typescript Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan Typed superset of JavaScript It compiles to JavaScript
- 31. Angular 1.x vs Angular 2.0 Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan
- 32. Static types for compile time checking Tooling – Rename, intellisense, got to definition etc ES6+ features Interfaces and non ES6 features Angular 2.0 ready Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 4.2 At SSW we recommend TypeScript
- 33. How strictly you will type things How to use integrate with 3rd party tools Steep learning curve Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 4.3 Benefiting from TypeScript
- 34. Bower and NPM vs Nuget
- 35. Command line tools? More set up the first time Latest version Great tooling for automation Easy install More control Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 5.1 Bower and NPM vs Nuget
- 36. 5.2 At SSW we use these Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan NPM Bower Definitely typed package manager
- 37. Will you use a task runner like Gulpjs?
- 38. We now need a build process for our frontends not just our backends.
- 39. Gulp JS 1. Stream based 2. Code over configuration 3. 1500+ plugins Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 6.1 Gulp versus Grunt Grunt JS 1. File based 2. Configuration over code 3. 3000+ plugins
- 40. Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 6.2 Visual Studio task runner explorer
- 41. How will you secure your application?
- 42. 7.1 Angular security can be difficult With no page refreshes you need tokens vs cookies Security as a service or build your own? There are a lot of things to consider Refresh tokens, mobile apps etc… Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan
- 43. Which third party libraries will you use?
- 44. 8.1 At SSW we use Kendo Angular UI /Angular strap Lodash D3 charting and more Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan
- 45. How to get Angular 2.0 ready?
- 46. Module loading Less difficult directives Better performance Easier mental map Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan What is missing in angular 1.x
- 47. Faster Simpler Backed by Microsofts TypeScript team Backed by Googles development team = Confidence Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan Angular 2.0 improvements
- 48. TypeScript with ES6 classes New router in 1.5 will be the same as 2.0 Components based project structure Frontend build process with Gulpjs Componentise your app Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 9.1 How to get AngularJS 2.0 ready
- 49. How to get and keep up to speed?
- 50. Build on a tested project set up by SSW On site training Watch Dev Super Powers Pluralsight Angular.io Egghead.io Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan 10.1 Some great resources
- 52. 2 days of ASP.NET 5 and Angular 2 Join the Conversation #DevSuperPowersIP @DuncHunter @AdamCogan
- 53. 6. Use GulgJS for your build process 5. Use Bower and NPM vs Nuget Summary 2. Do SPAs where you can 1. You should you use Angular 3. Take time to get your architecture right 4. Use TypeScript 7. Allow extra time for security 8. Use Kendo, Angular UI and lodash 9. Be Angular 2.0 ready with TypeScript 10. Stay up to date with SSW’s help
- 54. “I want our front end code to be as solid as our back end code”
- 55. Thank you! info@ssw.com.au www.ssw.com.au Sydney | Melbourne | Brisbane | Adelaide
Hinweis der Redaktion
- This is the talk I wish someone gave me when we started with Angular at SSW
- This is actually me in Jervis Bay south of Sydney Follow me on twitter
- This is my goal for this presentation which Adam thinks is a very ambitious goal
- Approx. 45min for the 10 qu and the Q&A
- Lets start with a walk down memory lane
- TODO: Add spaghetti code image
- Because it is not always yes or is it?
- Angular really is a big html compiler at its core The HTML drive angular to instantiate your angular code It will compile your html looking for key attribute ng-app Then it looks for ng-controller and reads its value so main Angular will then go looking for your controller main Then it looks for every element like a button click Another example is the {{}} double curlies Another example is a directive to combine logic and html for example a menu
- This is an example of how I would might show a message box with Jquery in an MVC application
- This shows you how much more structured your code is in Angular vs mvc
- TODO: show image of history in browser TODO: One page a view TODO: Discuss more about routing any alternatives in other frameworks
- TODO: show image of history in browser TODO: One page a view TODO: Discuss more about routing any alternatives in other frameworks
- Helps with code reuse, and unit testing your application and make development on the front end a real pleasure to write and read.
- Dominate the frontend space Google use it and so many companies have vested interest it is not going any where
- Angular started as a testing tool Karma and protractor
- Faster and more enjoyable for the devs which means save money and better product
- Should you do a full single page app with all angular routing and a api backend or should you use a hybrid or just MVC We do a lot of both but the main decision now is if ti is a new greenfield project or not
- Move to next slide after reading this
- Left is by feature Right by folder Hybrid
- Keep everything for the app in the app folder even our initial index.html just has an ng-include to pull in the layout page from the app folder
- If you have not seen this check it out More starts in 10 months than Typescript has in years but that is changing
- TODO: picture with volume dial
- Ok another decision that my colleague says is a no brainer well it is kind of points 5 and six but nugget versus bower and the whole package manager build process story
- These are what we use
- This is what my colleague and many are saying is a no brainer these days for a new project. Another way of saying this is to have a build process We have been building our server side code for ages but now we have to build our client side code - minify, rename, concat and rearrange etc The Microsoft and Visual Studio is going Automate processes More time to set up It gets easier
- You write code versus config files
- We use the task runner explorer for 2015 but Currently can not do both 2015 and 2013 but will be fixed
- This is always a time sink the first time but it is very simple once you have done it a couple of times But always lose a day or two or three with the customisation This is a massive problem that people underestimate and its likely another point that you
- Cookies are difficult to use across domains and more susceptible to CSRF cross site request forgery Tokens have more control and work across domains but require more code Have to write code on the client to get, save and send tokens on request
- Big benefit of Angular is the wealth of third party
- We use these two a lot
- You can not get a week with out breaking changes
- It changes so fast and if you are not always starting new projects you may miss some of the changes
- NOTE agenda same as finish Approx. 45min for the 10 qu and the Q&A