2015 - introduction to building enterprise web applications using angular.js
Post on 19-Aug-2015
29 Views
Preview:
TRANSCRIPT
<web/F>
WebF Introduction The struggle for better ecosystem
<web/F> <web/F>
Idea of powerful programming languages
<web/F> <web/F>
What makes a language powerful?
• Speed
• Parallel execution
• SIMD, MISD, MIMD
• Expressive constructs
• Vast libraries
• Multiple runtimes
<web/F> <web/F>
Does JavaScript has it?
• Speed
• Parallel execution
• SIMD, MISD, MIMD
• Expressive constructs
• Vast libraries
• Multiple runtimes
<web/F> <web/F>
Then, can you call JavaScript powerful?
Probably not… Otherwise this would not exists
Coffee Script
JavaScript Dart
C/C++
Java
Transpilation
Transpiler
<web/F> <web/F>
Let’s redefine the idea of Power
What is the most powerful thing on Earth?
Something more
powerful than HULK…
<web/F> <web/F>
We all will agree, perhaps…
But Why? Almighty
<web/F> <web/F>
FREEDOM To do anything…
Because he has given us
<web/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.
<web/F> <web/F>
You can do this. A beginner might do this.
<web/F> <web/F>
JavaScript equally satisfies the hunger of experts as well.
<web/F> <web/F>
How do you want to package your JavaScript
Well, you decide what you need
• Globals
• AMD
• Common/JS
• ES2015 Modules
• UMD
<web/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
<web/F> <web/F>
But this freedom is not easy.
Freedom is a job of responsibility
<web/F> <web/F>
As Uncle Ben told Spiderman,
<web/F> <web/F>
As Uncle Ben told Spiderman,
with great power
comes great
Responsibility.
<web/F> <web/F>
A journey of a “JavaScript code”
And how do you utilize this -
great power or great freedom.
<web/F> <web/F>
Journey starts with 0 lines of code…
<web/F> <web/F>
One app one JavaScript file
One file approach is good because it will reduce
network calls. It will load faster.
<web/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
<web/F> <web/F>
And so you decide to split it.
<web/F> <web/F>
So you now face new hell
After 50,000 lines of code, you realize you have got
this…
<web/F> <web/F>
How do you handle this?
W
<web/F> <web/F>
W
How do you handle this?
<web/F> <web/F>
W
It will work but,
<web/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?
<web/F> <web/F>
This hell is called as
• Scalability
• Maintenance
• Performance
<web/F> <web/F>
So you realize that
You need a separation between Development
environment & Production environment.
<web/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
<web/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 process each time a code needs to be deployed.
<web/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?
<web/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.
<web/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
<web/F> <web/F>
Before we conclude anything
• Remember that front-end is not just about JavaScript.
• You don’t just have the responsibility of JavaScript. Other two pillars
of web front-end are equally expressive and freedom supporting.
• The responsibility towards them is equally important.
<web/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.)
<web/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.)
<web/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.)
<web/F> <web/F>
Entire front-end spectrum
jpeg
gif
Image (optimizer)
png Compressed
images
Build script (Grunt, Gulp, NPM, etc.)
<web/F> <web/F>
Entire front-end spectrum
Optimizer
SVG
Sprite generator
SVG SVG sprites
Build script (Grunt, Gulp, NPM, etc.)
<web/F> <web/F>
Finally, deploy if
Unit test?
e-2-e?
Build script
Integration
Continuous integration
Ready for production
Developer
<web/F> <web/F>
Shouldn’t Angular.js do this for us?
• After all, it is a framework…
<web/F> <web/F>
Angular.js won’t do it for you
• Angular will help you develop a product. But building a product is
separate thing.
• Product Building = Develop + Integrate + Build + Deploy + Deliver
<web/F> <web/F>
Users/Customers need this
Develop + Integrate + Build + Deploy + Deliver
<web/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
<web/F> <web/F>
First,
• We define a product
• We learn all about technology stack
• We learn about maintenance hell
<web/F> <web/F>
Second,
• We build a support ecosystem
• You might want to call it DevOps
• We see all the options available to us.
<web/F> <web/F>
Third,
• We see how to write better code
• Then we learn to scale our web application
<web/F> <web/F>
And then,
• There are 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.
<web/F> <web/F>
Thank you…
Let’s get the ball rolling
<web/F> <web/F>
By
Harshal Patil
@mistyharsh
top related