2015 - Introduction to building enterprise web applications using Angular.js
0 likes496 views
The document discusses the nature of JavaScript as a powerful programming language and the freedoms it offers to developers, which come with responsibilities. It emphasizes the importance of maintaining efficiency and organization in code as projects scale and highlights tools and practices for bundling and deploying JavaScript applications. The workshop aims to equip participants with knowledge on building enterprise web applications using Angular.js, while also addressing the broader software development ecosystem, including code quality and scalability.
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