2015 - Introduction to building enterprise web applications using Angular.js

transcript

<web/F>

WebF Introduction The struggle for better ecosystem

Idea of powerful programming languages

What makes a language powerful?

• Speed

• Parallel execution

• SIMD, MISD, MIMD

• Expressive constructs

• Vast libraries

• Multiple runtimes

Does JavaScript has it?

• Speed

• Parallel execution

• SIMD, MISD, MIMD

• Expressive constructs

• Vast libraries

• Multiple runtimes

Then, can you call JavaScript powerful?

Probably not… Otherwise this would not exists

Coffee Script

JavaScript Dart

Transpilation

Transpiler

Let’s redefine the idea of Power

What is the most powerful thing on Earth?

Something more

powerful than HULK…

We all will agree, perhaps…

But Why? Almighty

FREEDOM To do anything…

Because he has given us

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.

You can do this. A beginner might do this.

JavaScript equally satisfies the hunger of experts as well.

How do you want to package your JavaScript

Well, you decide what you need

• Globals

• AMD

• Common/JS

• ES2015 Modules

• UMD

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

But this freedom is not easy.

Freedom is a job of responsibility

As Uncle Ben told Spiderman,

As Uncle Ben told Spiderman,

with great power

comes great

Responsibility.

A journey of a “JavaScript code”

And how do you utilize this -

great power or great freedom.

Journey starts with 0 lines of code…

One app one JavaScript file

One file approach is good because it will reduce

network calls. It will load faster.

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

And so you decide to split it.

So you now face new hell

After 50,000 lines of code, you realize you have got

this…

How do you handle this?

It will work but,

• 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?

This hell is called as

• Scalability

• Maintenance

• Performance

So you realize that

You need a separation between Development

environment & Production environment.

What we need is

JS file

Bundled JS JS file

JS file

Development Production

So we have developer

JS file

Bundled JS JS file

JS file

But who will do this?

Bundler

Developer who will drive bundling process each time a code needs to be deployed.

The question is

• Should developer do this?

• Is it his responsibility to do these things as

• Should he not focus solely on product development?

• Why should he worry about deployment?

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.

So we have an answer

JS file

Bundled JS JS file

JS file

Build script (Grunt, Gulp, NPM, etc.)

Static analysis, transpile, minify, concat

Continuous Integration system

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.

Entire front-end spectrum

Linters (Jshint, eslint, jslint)

Transpilers (es6 to es5)

JS uglify (minify & concat)

Bundled JS

Stylus

CSS preprocessors

Post CSS (autoprefixer)

CSS uglify (minify, concat)

Bundled CSS

Markdown

Templates (server side)

HTML (validators)

Mapping (url, assets)

Bundled CSS

Image (optimizer)

png Compressed

images

Optimizer

Sprite generator

SVG SVG sprites

Finally, deploy if

Unit test?

e-2-e?

Build script

Integration

Continuous integration

Ready for production

Developer

Shouldn’t Angular.js do this for us?

• After all, it is a framework…

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

Users/Customers need this

Develop + Integrate + Build + Deploy + Deliver

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

First,

• We define a product

• We learn all about technology stack

• We learn about maintenance hell

Second,

• We build a support ecosystem

• You might want to call it DevOps

• We see all the options available to us.

Third,

• We see how to write better code

• Then we learn to scale our web application

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.

Thank you…

Let’s get the ball rolling

Harshal Patil

@mistyharsh

2015 - Introduction to building enterprise web applications using Angular.js

Technology