2015 - introduction to building enterprise web applications using angular.js

<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


<web/F> <web/F>

W

It will work but,

<web/F> <web/F>


• 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


<web/F> <web/F>


Sass

Stylus

CSS preprocessors

Less

Post CSS (autoprefixer)

CSS

CSS

CSS uglify (minify, concat)

Bundled CSS


<web/F> <web/F>


Jade

Markdown

Templates (server side)

Haml

HTML (validators)

HTML

HTML

Mapping (url, assets)

Bundled CSS


<web/F> <web/F>


jpeg

gif

Image (optimizer)

png Compressed

images


<web/F> <web/F>


Optimizer

SVG

Sprite generator

SVG SVG sprites


<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

https://twitter.com/mistyHarsh

https://twitter.com/mistyHarsh

2015 - introduction to building enterprise web applications using angular.js

Technology