AdvancedJS Tech Talk

32
Advanced JS Workshop – Coding Session, describing most opinionated technologies in JS world. https://github.com/albertstepanyan/advancedjs

description

Advanced JS is a Training application that covers the latest and well known Javascript tools and application frameworks nowadays. It covers such topics as Node JS, Express JS, Yeoman Skeleton, Angular JS, Heroku Cloud Engine, Phonegap, Responsive layouts etc. So in case you wanna learn something new check it out!

Transcript of AdvancedJS Tech Talk

  • Advanced JS Workshop Coding Session, describing most opinionated technologies in JS world. https://github.com/albertstepanyan/advancedjs
  • How Everything started ?
  • Well, Imagine 1995, Era of Cyberpunk, Sci fi. Era of slow internet and Crazy ideas
  • Guy named Brendan Eich who was working for Netscape decided to change the web world and invented brand new language called Javascript.
  • 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.
  • But Still question WHY ???
  • 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.
  • Creating a dynamic language like JavaScript would give users and developers an opportunity to make some elements on the webpage dynamic -> DHTML.
  • So Great Idea isnt it ?
  • 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 :
  • Your Nickname Super Sexy is already in use OOPS !
  • This is really embarrassing, so Javascript was called to help.
  • 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.
  • 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.
  • 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.
  • So After some time the lonely warrior proudly called Javascript
  • Called a cavalry for help, and the world changed forever !
  • Nowadays with the help of JavaScript fans like me, you can see JS everywhere Client Side
  • Server Side: Rhino
  • Desktop : Windows 8, chrome OS, extensions Mobile: Phonegap, Appcelerator, Sencha Gaming: Canvas, WebGl Protocols: HTML5 Websockets
  • 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.
  • 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
  • Lets Start with installing the Node JS. Go to http://nodejs.org/ And download Executables for your OS.
  • 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
  • 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
  • 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
  • AngularJS install with yeoman by typing in cli npm install g generator angular: http://angularjs.org/
  • Why AngularJS ?
  • 1. Very Opinionated 2. Average (not easy) Learning Curve 3. MVC design pattern 4. Powerful Binding system 5. HTML serves as a view 6. Data models are Standard JS objects 7. Prototype based Dom Abstraction Layer 8. Write Less Code (for lazy people like me)
  • Ok, so What is the magic beyond this ? Have you ever asked you a question how all these works ?
  • 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 !!