Top Banner
Advanced JS Workshop – Coding Session, describing most opinionated technologies in JS world. https://github.com/albertstepanyan/advancedjs
32
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: AdvancedJS Tech Talk

Advanced JSWorkshop – Coding Session, describing most opinionated

technologies in JS world.

https://github.com/albertstepanyan/advancedjs

Page 2: AdvancedJS Tech Talk

How Everything started ?

Page 3: AdvancedJS Tech Talk

Well, Imagine 1995, Era of Cyberpunk, Sci fi. Era of slow internet and Crazy ideas

Page 4: AdvancedJS Tech Talk

Guy named Brendan Eich who was working for Netscape decided to change the web world and invented brand new language called Javascript.

Page 5: AdvancedJS Tech Talk

The language was completely different from what developers were used to see

before. No Compiler. No interpreter. Everything was handled by browser

Rendering engine. Revolution.

Page 6: AdvancedJS Tech Talk

But Still question WHY ???

Page 7: AdvancedJS Tech Talk

By that time Web was just starting to grow, Internet Connections were slow. Webpage was just a bunch of HTML elements somehow served from Servers. User experience was…….

Page 8: AdvancedJS Tech Talk

Creating a dynamic language like JavaScript would give users and developers an opportunity to make some elements on the webpage dynamic -> DHTML.

Page 9: AdvancedJS Tech Talk

So Great Idea isn’t it ?

Page 10: AdvancedJS Tech Talk

Imagine you have to wait minutes when your registration form on your favorite dating website is submitted, then page reloads you get excited cause the world will finally see your profile, but finally you get a feedback from Server :

Page 11: AdvancedJS Tech Talk

Your Nickname “Super Sexy” is already in use OOPS !

Page 12: AdvancedJS Tech Talk

This is really embarrassing, so Javascript was called to help.

Page 13: AdvancedJS Tech Talk

The so called DHTML, started validating dozens of forms on the websites helping users and developers, create more dynamic websites, and with the IE6 the world changed when AJAX came through and the light was seen. But this session is not about JS history as after some time, developers from more strict languages started to underestimate the language, because of its scripting nature and browser quirks.

Page 14: AdvancedJS Tech Talk

So Some companies like ADOBE tried to solve this by creating a language which is OOP, strict and based on ECMA-script and Javascript started becoming an exile.

Page 15: AdvancedJS Tech Talk

But as we know Good always wins the Evil and after some time People like John Resig (jQuery), started creating open source libraries to make a beauty from the beast.

Page 16: AdvancedJS Tech Talk

So After some time the lonely warrior proudly called Javascript

Page 17: AdvancedJS Tech Talk

Called a cavalry for help, and the world changed forever !

Page 18: AdvancedJS Tech Talk

Nowadays with the help of JavaScript fans like me, you can see JS everywhere – Client Side

Page 19: AdvancedJS Tech Talk

Server Side:

Rhino

Page 20: AdvancedJS Tech Talk

Desktop : Windows 8, chrome OS, extensions

Mobile: Phonegap, Appcelerator, Sencha

Gaming: Canvas, WebGl

Protocols: HTML5 Websockets

Page 21: AdvancedJS Tech Talk

Nowadays, using these latest technologies you can create Amazing Applications that will rock in Browser, on your lovely IPHONE and on your favorite Gaming desktop. So The time has come, And Revolution is Coming Mr. Wayne.

Page 22: AdvancedJS Tech Talk

What does that mean, It means Buckle your seat belt Dorothy, cause Cansas is going Bye bye:http://www.youtube.com/watch?v=0-JJuHpfN5g

Page 23: AdvancedJS Tech Talk

Lets Start with installing the Node JS.

Go to http://nodejs.org/

And download Executables for your OS.

Page 24: AdvancedJS Tech Talk

Next Step is to install GRUNT. http://gruntjs.com/ Grunt is a Javascript task Runner, that makes a developer life easy and productive: npm install –g grunt-cli

Page 25: AdvancedJS Tech Talk

The time for bower has come: go to http://bower.io/Bower is a package manager for the web, so get it npm install –g bower

Page 26: AdvancedJS Tech Talk

Yeoman: http://yeoman.io/ , this is by far one of the best Dev Skeletons for developing Javascript – Applications. In CLI npm install –g yo, npm install –g generator-webapp

Page 27: AdvancedJS Tech Talk

AngularJS install with yeoman by typing in cli npminstall –g generator angular: http://angularjs.org/

Page 28: AdvancedJS Tech Talk

Why AngularJS ?

Page 29: AdvancedJS Tech Talk

1. Very Opinionated2. Average (not easy) Learning Curve3. MVC design pattern4. Powerful Binding system5. HTML serves as a view6. Data models are Standard JS objects7. Prototype based Dom Abstraction Layer8. Write Less Code (for lazy people like me)

Page 30: AdvancedJS Tech Talk

Ok, so What is the magic beyond this ?

Have you ever asked you a question how all these works ?

Page 31: AdvancedJS Tech Talk
Page 32: AdvancedJS Tech Talk

I guess no explanation in documentation, tutorials are not exact, cause you will not need this in everyday life. But if you wanna really find how deep the rabbit hole is, you should learn your best friends are $compile, $parse, $apply, $watch and $digest.

This is really where the magic happens !!