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.

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