2015 - Introduction to building enterprise web applications using Angular.js
0 likes492 views
Introduction presentation for workshop - Building Enterprise Web applications using Angular.js. It gives a quick 10 minutes overview of what it means to build an enterprise web app.
More Related Content
What's hot (20)
Viewers also liked (10)
Similar to 2015 - Introduction to building enterprise web applications using Angular.js (20)
Recently uploaded (20)
2015 - Introduction to building enterprise web applications using Angular.js
- 1. < w e b / F> WebF Introduction The struggle for better ecosystem
- 2. < w e b / F><web/F> Idea of powerful programming languages
- 3. < w e b / F><web/F> What makes a language powerful? • Speed • Parallel execution • SIMD, MISD, MIMD • Expressiveconstructs • Vast libraries • Multiple runtimes
- 4. < w e b / F><web/F> Does JavaScript has it? • Speed • Parallel execution • SIMD, MISD, MIMD • Expressiveconstructs • Vast libraries • Multiple runtimes
- 5. < w e b / F><web/F> Then, can you call JavaScript powerful? Probably not… Otherwisethis would not exists Coffee Script JavaScript Dart C/C++ Java Transpilation Transpiler
- 6. < w e b / F><web/F> Let’s redefine the idea of Power What is the most powerful thing on Earth?
- 7. Something more powerful than HULK…
- 8. < w e b / F><web/F> We all will agree, perhaps… But Why? Almighty
- 9. < w e b / F><web/F> FREEDOMTo do anything… Because he has given us
- 10. < w e b / F><web/F> Coming back to JavaScript • JavaScript grants such complete freedom to developers • It is equal for all. • Nobody can own or control it. • It doesn’t distinguish between beginner or expert. • It doesn’t care if you call it Ecma, ES2015 or JavaScript.
- 11. < w e b / F><web/F> You can do this. A beginner might do this.
- 12. < w e b / F><web/F> JavaScript equally satisfies the hunger of experts as well.
- 13. < w e b / F><web/F> How do you want to package your JavaScript Well, you decide what you need • Globals • AMD • Common/JS • ES2015 Modules • UMD
- 14. < w e b / F><web/F> How do you want to serve clients • Edit and deploy without compilation • Compile if you want (like packaged apps) • Minify your code if you want • Don’t minify your code if you don’t want • Use caching or don’t use caching
- 15. < w e b / F><web/F> But this freedom is not easy. Freedom is a job of responsibility
- 16. < w e b / F><web/F> As Uncle Ben told Spiderman,
- 17. < w e b / F><web/F> As Uncle Ben told Spiderman, with great power comes great Responsibility.
- 18. < w e b / F><web/F> A journey of a “JavaScript code” And how do you utilize this - great power or great freedom.
- 19. < w e b / F><web/F> Journey starts with 0 lines of code…
- 20. < w e b / F><web/F> One app one JavaScript file One file approach is good because it will reduce network calls. It will load faster.
- 21. < w e b / F><web/F> After 5000 lines of code, you realize that • One file is never meant to be maintainable • Each time version control conflicts • Your editor cannot even handle scroll properly • No parallel development
- 22. < w e b / F><web/F> And so you decide to split it.
- 23. < w e b / F><web/F> So you now face new hell After 50,000 lines of code, you realize you have got this…
- 24. < w e b / F><web/F> How do you handle this? W
- 25. < w e b / F><web/F> W How do you handle this?
- 26. < w e b / F><web/F> W It will work but,
- 27. < w e b / F><web/F> How do you handle this? • How to figure out dependency • What happened to one app one file rule • So you were building with wrong assumption • Has your network automatically became super efficient • Is there no scope for parallel execution • What if more than one page request such order • Where is DRY?
- 28. < w e b / F><web/F> This hell is called as • Scalability • Maintenance • Performance
- 29. < w e b / F><web/F> So you realize that You need a separation between Development environment & Production environment.
- 30. < w e b / F><web/F> What we need is JS file Bundled JS JS file JS file JS file Development Production B O U N D A R Y
- 31. < w e b / F><web/F> So we have developer JS file Bundled JS JS file JS file JS file But who will do this? Bundler Developer who will drive bundling processeach time a code needs to be deployed.
- 32. < w e b / F><web/F> The question is • Should developer do this? • Is it his responsibility to do these things as well? • Should he not focus solely on product development? • Why should he worry about deployment?
- 33. < w e b / F><web/F> If you ask developer to do this • Repeated and mundane tasks will lead to error. • It will consume his time for each deployment. • His productivity will go down. • Joy of software programming is wiped out with deployment headache.
- 34. < w e b / F><web/F> So we have an answer JS file Bundled JS JS file JS file JS file Build script (Grunt, Gulp, NPM, etc.) Static analysis, transpile, minify, concat CI Continuous Integration system
- 35. < w e b / F><web/F> Before we conclude anything • Remember that front-end is not just about JavaScript. • You don’t just have the responsibilityof JavaScript. Other two pillars of web front-end are equally expressive and freedom supporting. • The responsibilitytowards them is equally important.
- 36. < w e b / F><web/F> Entire front-end spectrum JS JS Linters (Jshint, eslint, jslint) JS Transpilers (es6 to es5) JS JS JS uglify (minify & concat) Bundled JS Build script (Grunt, Gulp, NPM, etc.)
- 37. < w e b / F><web/F> Entire front-end spectrum Sass Stylus CSS preprocessors Less Post CSS (autoprefixer) CSS CSS CSS uglify (minify, concat) Bundled CSS Build script (Grunt, Gulp, NPM, etc.)
- 38. < w e b / F><web/F> Entire front-end spectrum Jade Markdown Templates (server side) Haml HTML (validators) HTML HTML Mapping (url, assets) Bundled CSS Build script (Grunt, Gulp, NPM, etc.)
- 39. < w e b / F><web/F> Entire front-end spectrum jpeg gif Image (optimizer) png Compressed images Build script (Grunt, Gulp, NPM, etc.)
- 40. < w e b / F><web/F> Entire front-end spectrum Optimizer SVG Sprite generator SVG SVG sprites Build script (Grunt, Gulp, NPM, etc.)
- 41. < w e b / F><web/F> Finally, deploy if Unit test? e-2-e? Build script Integration Continuousintegration Ready for production Developer
- 42. < w e b / F><web/F> Shouldn’t Angular.js do this for us? • After all, it is a framework…
- 43. < w e b / F><web/F> Angular.js won’t do it for you • Angular will help you develop a product. But buildinga product is separate thing. • Product Building = Develop + Integrate+ Build + Deploy + Deliver
- 44. < w e b / F><web/F> Users/Customers need this Develop + Integrate+ Build + Deploy + Deliver
- 45. < w e b / F><web/F> So how do we bring it all together • That is exactly what we are going to do in this workshop. • Building enterprise web applications using Angular.js
- 46. < w e b / F><web/F> First, • We define a product • We learn all about technology stack • We learn about maintenancehell
- 47. < w e b / F><web/F> Second, • We build a support ecosystem • You might want to call it DevOps • We see all the options available to us.
- 48. < w e b / F><web/F> Third, • We see how to write better code • Then we learn to scale our web application
- 49. < w e b / F><web/F> And then, • Thereare pieces that helps you make a better front-end engineer • Functional programming • ES6 • Asynchronous programming • This is not angular specific but heart of any JavaScript code.
- 50. < w e b / F><web/F> Thank you… Let’s get the ball rolling
- 51. < w e b / F><web/F> By Harshal Patil @mistyharsh