SlideShare a Scribd company logo

Grown-up javascript with AngularJS

Surprisingly many web developers don't realize that Javascript ecosystem is not the same as it was few years ago, when building a single-page web application was considered risky business. Those times are way behind. Modern javascript MVC frameworks are if not silver, but certainly solid bullets which every person who wants to use benefits of evolution should be aware of. I'll tell you about challenges that happen when you build a single-page application, about REST interface, and certainly about one of such frameworks: AngularJS, created by hackers from Google keeping in mind best software development principles such as TDD and dependency injections. That's why writing with AngularJS is such a pleasure.

1 of 82
Download to read offline
Grown-up JavaScript.
       with AngularJS

              Mykhailo Kotsur
              @sotomajor_ua
We will talk about

• Different ways to build a web-app
• Why in Javascript?
• AngularJS: things that make it rock
• Samples
• Code talks
Multi page application
Grown-up javascript with AngularJS
... Downloading page
... Downloading page

... Rendering page
... Downloading page

... Rendering page       ... Loading external resources
... Downloading page

... Rendering page       ... Loading external resources

               ... Executing scripts
We want:
We want:

Smooth user experience
We want:

Smooth user experience
  Unload our servers
Single page application
http://www.flickr.com/photos/60988113@N06/5996111491/sizes/z/in/photostream/




    http://www.lurvely.com/photo/491666425/Thin_tree_at_Lagoinha_Beach/
Thick server
Thick server


- Grab data
                    - Talk to server
- Business stuff
                    - Prepare HTML
- Prepare HTML
Thick server


- Grab data
                    - Talk to server
- Business stuff
                    - Prepare HTML
- Prepare HTML
We want
We want

Smooth experience!
We want
              Also
                 for
                     form
Smooth experience!        s!
We want
              Also
                 for
                     form
Smooth experience!        s!

  Unload servers!
We want
              Also
                 for
                     form
Smooth experience!        s!

  Unload servers!

Simplify development!
We want
              Also
                 for
                     form
Smooth experience!        s!

  Unload servers!

Simplify development!

Make server reusable!
Many clients - one
     server
Thin server



- Grab data           - Talk to server
- Business stuff      - Prepare view
Thin server

                   ?
- Grab data            - Talk to server
- Business stuff       - Prepare view
State
                                                 Transfer
                                                 REpresentational




http://www.flickr.com/photos/film_images/5687432148/
Verbs

POST
 GET
 PUT
DELETE
Verbs

POST     CREATE
 GET      READ
 PUT     UPDATE
DELETE   DELETE
Nouns
 people
Nouns
      people


Content types
      text/xml
     text/html
  application/json
Responses

• 200 - OK
• 201 - Created
• 204 - No content
• 404 - Not found
• ... many more
“Sentences”
GET me /people in format of application/json
“Sentences”
GET me /people in format of application/json

200! Here is your application/json
“Sentences”
GET me /people in format of application/json

200! Here is your application/json
[
  {id: 1, name: “Mike”},
  {id: 2, name: “Tom”}
]
“Sentences”
POST to /people in format of application/json

{name: “Jason”}
“Sentences”
POST to /people in format of application/json

{name: “Jason”}



200! Here is your application/json

{id: 3, name: “Jason”}
Our achievements:
• Happy users
• Less hardware
• Fair responsibility separation
• To be used by many clients
Our achievements:
• Happy users
• Less hardware
• Fair responsibility separation
• To be used by many clients
Any drawbacks?
Grown-up javascript with AngularJS
Grown-up javascript with AngularJS
Grown-up javascript with AngularJS
Grown-up javascript with AngularJS
http://www.flickr.com/photos/chalkbass/2334850242/sizes/z/in/photostream/
                                                                           SEO
What now?

• Data binding
• Routing
• Template engine
• Tests
Grown-up javascript with AngularJS
Grown-up javascript with AngularJS
2.5 years in development
2.5 years in development
Version 1.0 few weeks ago
2.5 years in development
Version 1.0 few weeks ago
Used in Google’s production projects
2.5 years in development
Version 1.0 few weeks ago
Used in Google’s production projects
3 people of core team + hundreds of community
2.5 years in development
Version 1.0 few weeks ago
Used in Google’s production projects
3 people of core team + hundreds of community
Makes web development fun again!
Grown-up javascript with AngularJS
Easy data binding
Easy data binding
Declarative approach
Easy data binding
Declarative approach
Routing and templating
Easy data binding
Declarative approach
Routing and templating
DI and TDD as a design base (15000+ tests)
Easy data binding
Easy data binding
   <h1>Hello, <span id="namePlaceholder"></span></h1>
    <input id="name" type="text">

    <script type="text/javascript">
        $(
            $('#name').keydown(function(e) {
                $('#namePlaceholder').html(e.target.value);
            })
        );
    </script>
<h1>Hello, {{name}}</h1>
<input type="text" ng-model="name">
Declarative approach
<div id="base"></div>

<script type="text/javascript">
  $(
      $([['Ciao', '‫' ,'שלום‬Привіт']]).each( function(k,v) {
          $('#base').append($('<h1>Hello, ' + v + '</h1>'));
      })
  );
</script>
<h1 ng-repeat="n in ['Ciao', '‫' ,'שלום‬Привіт']">
   Hello, {{n}}
</h1>
Routing and templating


   http://example.com/#!/register
???
$routeProvider.when(
  '/example',
  {templateUrl: './js/templates/example.html'}
);
Grown-up javascript with AngularJS
???
var SomeCtrl = function($scope, $element, $location) {
...
}
it('should just work', inject(function($controller) {
     var location = {path: function() {return '/';}}
     $controller(
        TabsCtrl,
        {$scope: scope, $element: base, $location: location}
     );

    expect(something).toBeTruthy();
}));
Grown-up javascript with AngularJS
$httpBackend.whenGET('http://api.com').respond({...});
$httpBackend.whenGET(/.*/).passThrough();
Grown-up javascript with AngularJS
Grown-up javascript with AngularJS
Production examples
Grown-up javascript with AngularJS
Grown-up javascript with AngularJS
Grown-up javascript with AngularJS
Grown-up javascript with AngularJS
Hello world example
 If you read this presentation on your own, checkout the
example from: http://github.com/mkotsur/flatometer and walk thru all
                 steps with http://bit.ly/N2MyVU
                 and read commit messages...
Questions?
                       http://mkotsur.github.com/gitoscop/




http://angularjs.org                        http://github.com/mkotsur/flatometer

Recommended

How to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public ReleaseHow to Prepare a WordPress Theme for Public Release
How to Prepare a WordPress Theme for Public ReleaseDavid Yeiser
 
WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structurekeithdevon
 
Turning Landing Pages into Lead Gen Gold
Turning Landing Pages into Lead Gen GoldTurning Landing Pages into Lead Gen Gold
Turning Landing Pages into Lead Gen GoldPardot
 
Digital marketing class ppt
Digital marketing class pptDigital marketing class ppt
Digital marketing class pptketan borhade
 
Reviewing RESTful Web Apps
Reviewing RESTful Web AppsReviewing RESTful Web Apps
Reviewing RESTful Web AppsTakuto Wada
 
WordPress Theme Development Basics
WordPress Theme Development BasicsWordPress Theme Development Basics
WordPress Theme Development BasicsTech Liminal
 

More Related Content

What's hot

What is WordPress and Why Is Everyone Talking About it
What is WordPress and Why Is Everyone Talking About itWhat is WordPress and Why Is Everyone Talking About it
What is WordPress and Why Is Everyone Talking About itBobWP.com
 
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails
Hypermedia: The Missing Element to Building Adaptable Web APIs in RailsHypermedia: The Missing Element to Building Adaptable Web APIs in Rails
Hypermedia: The Missing Element to Building Adaptable Web APIs in RailsToru Kawamura
 
Moving from Wordpress.com to Wordpress.org - Wordcamp Toronto 2011
Moving from Wordpress.com to Wordpress.org - Wordcamp Toronto 2011Moving from Wordpress.com to Wordpress.org - Wordcamp Toronto 2011
Moving from Wordpress.com to Wordpress.org - Wordcamp Toronto 2011Georgiana Laudi
 
WordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
WordCamp Kent 2019 - WP 101: Local Development - Themes and PluginsWordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
WordCamp Kent 2019 - WP 101: Local Development - Themes and PluginsJoe Querin
 
WordCamp Boston 2012 - Creating Content With Shortcodes
WordCamp Boston 2012 - Creating Content With ShortcodesWordCamp Boston 2012 - Creating Content With Shortcodes
WordCamp Boston 2012 - Creating Content With ShortcodesJon Bishop
 
电子商务网站前端开放实战
电子商务网站前端开放实战电子商务网站前端开放实战
电子商务网站前端开放实战macji
 
D2-超级旺铺
D2-超级旺铺D2-超级旺铺
D2-超级旺铺supershop
 
Custom WordPress theme development
Custom WordPress theme developmentCustom WordPress theme development
Custom WordPress theme developmentTammy Hart
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlantaThinkful
 
SEO for WordPress in 10 Simple Steps
SEO for WordPress in 10 Simple Steps SEO for WordPress in 10 Simple Steps
SEO for WordPress in 10 Simple Steps Santosh Raut
 
Wordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for ThemeforestWordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for ThemeforestEnayet Rajib
 
Simple WordPress SEO
Simple WordPress SEOSimple WordPress SEO
Simple WordPress SEOSantosh Raut
 
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalWordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalChandra Prakash Thapa
 
The WordPress REST API as a Springboard for Website Greatness
The WordPress REST API as a Springboard for Website GreatnessThe WordPress REST API as a Springboard for Website Greatness
The WordPress REST API as a Springboard for Website GreatnessWP Engine UK
 
Amazon.com's Web Services Opportunity
Amazon.com's Web Services OpportunityAmazon.com's Web Services Opportunity
Amazon.com's Web Services OpportunityTim O'Reilly
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen
 
Basic web page designing
Basic web page designingBasic web page designing
Basic web page designingShakil Mahmood
 
New Web Typography
New Web TypographyNew Web Typography
New Web TypographyMonotype
 

What's hot (19)

What is WordPress and Why Is Everyone Talking About it
What is WordPress and Why Is Everyone Talking About itWhat is WordPress and Why Is Everyone Talking About it
What is WordPress and Why Is Everyone Talking About it
 
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails
Hypermedia: The Missing Element to Building Adaptable Web APIs in RailsHypermedia: The Missing Element to Building Adaptable Web APIs in Rails
Hypermedia: The Missing Element to Building Adaptable Web APIs in Rails
 
Moving from Wordpress.com to Wordpress.org - Wordcamp Toronto 2011
Moving from Wordpress.com to Wordpress.org - Wordcamp Toronto 2011Moving from Wordpress.com to Wordpress.org - Wordcamp Toronto 2011
Moving from Wordpress.com to Wordpress.org - Wordcamp Toronto 2011
 
WordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
WordCamp Kent 2019 - WP 101: Local Development - Themes and PluginsWordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
WordCamp Kent 2019 - WP 101: Local Development - Themes and Plugins
 
WordCamp Boston 2012 - Creating Content With Shortcodes
WordCamp Boston 2012 - Creating Content With ShortcodesWordCamp Boston 2012 - Creating Content With Shortcodes
WordCamp Boston 2012 - Creating Content With Shortcodes
 
电子商务网站前端开放实战
电子商务网站前端开放实战电子商务网站前端开放实战
电子商务网站前端开放实战
 
D2-超级旺铺
D2-超级旺铺D2-超级旺铺
D2-超级旺铺
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
Custom WordPress theme development
Custom WordPress theme developmentCustom WordPress theme development
Custom WordPress theme development
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
 
SEO for WordPress in 10 Simple Steps
SEO for WordPress in 10 Simple Steps SEO for WordPress in 10 Simple Steps
SEO for WordPress in 10 Simple Steps
 
Wordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for ThemeforestWordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for Themeforest
 
Simple WordPress SEO
Simple WordPress SEOSimple WordPress SEO
Simple WordPress SEO
 
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalWordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
 
The WordPress REST API as a Springboard for Website Greatness
The WordPress REST API as a Springboard for Website GreatnessThe WordPress REST API as a Springboard for Website Greatness
The WordPress REST API as a Springboard for Website Greatness
 
Amazon.com's Web Services Opportunity
Amazon.com's Web Services OpportunityAmazon.com's Web Services Opportunity
Amazon.com's Web Services Opportunity
 
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to lifeFrom PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
 
Basic web page designing
Basic web page designingBasic web page designing
Basic web page designing
 
New Web Typography
New Web TypographyNew Web Typography
New Web Typography
 

Viewers also liked

Media Matters Bootcamp may 2012
Media Matters Bootcamp may 2012Media Matters Bootcamp may 2012
Media Matters Bootcamp may 2012Media Matters
 
РИФ 2016, Аналитика и ее автоматизация при поисковом продвижении трафиковых п...
РИФ 2016, Аналитика и ее автоматизация при поисковом продвижении трафиковых п...РИФ 2016, Аналитика и ее автоматизация при поисковом продвижении трафиковых п...
РИФ 2016, Аналитика и ее автоматизация при поисковом продвижении трафиковых п...Тарасов Константин
 
03 New Linked In Profile Presentation112010
03 New Linked In Profile Presentation11201003 New Linked In Profile Presentation112010
03 New Linked In Profile Presentation112010amiracali
 
Варвари біля воріт. Принципи корпоративного управління.
Варвари біля воріт. Принципи корпоративного управління.Варвари біля воріт. Принципи корпоративного управління.
Варвари біля воріт. Принципи корпоративного управління.FormulaS
 
Nanotechnology Mae Baan 311009
Nanotechnology  Mae Baan 311009Nanotechnology  Mae Baan 311009
Nanotechnology Mae Baan 311009NSTDA THAILAND
 
למה אני אוהב כדורגל
למה אני אוהב כדורגללמה אני אוהב כדורגל
למה אני אוהב כדורגלyossi koren
 
РИФ 2016, Поисковая оптимизация для мобильных приложений на практике
РИФ 2016, Поисковая оптимизация для мобильных приложений на практикеРИФ 2016, Поисковая оптимизация для мобильных приложений на практике
РИФ 2016, Поисковая оптимизация для мобильных приложений на практикеТарасов Константин
 
РИФ 2016, Перформанс в регионах. Блондинка.ру.
РИФ 2016, Перформанс в регионах. Блондинка.ру.РИФ 2016, Перформанс в регионах. Блондинка.ру.
РИФ 2016, Перформанс в регионах. Блондинка.ру.Тарасов Константин
 
איך להפיק את המטיב מהערכת ביצועים 3
איך להפיק את המטיב מהערכת ביצועים   3איך להפיק את המטיב מהערכת ביצועים   3
איך להפיק את המטיב מהערכת ביצועים 3yossi koren
 
РИФ 2016, Сквозная аналитика как метод контроля подрядчика по рекламе
РИФ 2016, Сквозная аналитика как метод контроля подрядчика по рекламеРИФ 2016, Сквозная аналитика как метод контроля подрядчика по рекламе
РИФ 2016, Сквозная аналитика как метод контроля подрядчика по рекламеТарасов Константин
 
РИФ 2016, Как главенство данных меняет бизнес-процессы высоконагруженного про...
РИФ 2016, Как главенство данных меняет бизнес-процессы высоконагруженного про...РИФ 2016, Как главенство данных меняет бизнес-процессы высоконагруженного про...
РИФ 2016, Как главенство данных меняет бизнес-процессы высоконагруженного про...Тарасов Константин
 
Emerveillez vous [fr-gr] vvv
Emerveillez vous [fr-gr] vvvEmerveillez vous [fr-gr] vvv
Emerveillez vous [fr-gr] vvvKostas Tampakis
 
Microsoft word taiwan club chinese class tutor course
Microsoft word   taiwan club chinese class tutor courseMicrosoft word   taiwan club chinese class tutor course
Microsoft word taiwan club chinese class tutor courseshiauchin.su
 
רמי לוי רוצה להיות גדול
רמי לוי רוצה להיות גדולרמי לוי רוצה להיות גדול
רמי לוי רוצה להיות גדולyossi koren
 

Viewers also liked (20)

Media Matters Bootcamp may 2012
Media Matters Bootcamp may 2012Media Matters Bootcamp may 2012
Media Matters Bootcamp may 2012
 
Cow Banner
Cow  BannerCow  Banner
Cow Banner
 
РИФ 2016, Аналитика и ее автоматизация при поисковом продвижении трафиковых п...
РИФ 2016, Аналитика и ее автоматизация при поисковом продвижении трафиковых п...РИФ 2016, Аналитика и ее автоматизация при поисковом продвижении трафиковых п...
РИФ 2016, Аналитика и ее автоматизация при поисковом продвижении трафиковых п...
 
! иде про автоматическое кп
! иде про автоматическое кп! иде про автоматическое кп
! иде про автоматическое кп
 
03 New Linked In Profile Presentation112010
03 New Linked In Profile Presentation11201003 New Linked In Profile Presentation112010
03 New Linked In Profile Presentation112010
 
ο δρόμος
ο δρόμοςο δρόμος
ο δρόμος
 
Варвари біля воріт. Принципи корпоративного управління.
Варвари біля воріт. Принципи корпоративного управління.Варвари біля воріт. Принципи корпоративного управління.
Варвари біля воріт. Принципи корпоративного управління.
 
Nanotechnology Mae Baan 311009
Nanotechnology  Mae Baan 311009Nanotechnology  Mae Baan 311009
Nanotechnology Mae Baan 311009
 
למה אני אוהב כדורגל
למה אני אוהב כדורגללמה אני אוהב כדורגל
למה אני אוהב כדורגל
 
РИФ 2016, Поисковая оптимизация для мобильных приложений на практике
РИФ 2016, Поисковая оптимизация для мобильных приложений на практикеРИФ 2016, Поисковая оптимизация для мобильных приложений на практике
РИФ 2016, Поисковая оптимизация для мобильных приложений на практике
 
РИФ 2016, Перформанс в регионах. Блондинка.ру.
РИФ 2016, Перформанс в регионах. Блондинка.ру.РИФ 2016, Перформанс в регионах. Блондинка.ру.
РИФ 2016, Перформанс в регионах. Блондинка.ру.
 
איך להפיק את המטיב מהערכת ביצועים 3
איך להפיק את המטיב מהערכת ביצועים   3איך להפיק את המטיב מהערכת ביצועים   3
איך להפיק את המטיב מהערכת ביצועים 3
 
РИФ 2016, Сквозная аналитика как метод контроля подрядчика по рекламе
РИФ 2016, Сквозная аналитика как метод контроля подрядчика по рекламеРИФ 2016, Сквозная аналитика как метод контроля подрядчика по рекламе
РИФ 2016, Сквозная аналитика как метод контроля подрядчика по рекламе
 
Floating point
Floating pointFloating point
Floating point
 
Seo Astra-Web
Seo Astra-WebSeo Astra-Web
Seo Astra-Web
 
РИФ 2016, Как главенство данных меняет бизнес-процессы высоконагруженного про...
РИФ 2016, Как главенство данных меняет бизнес-процессы высоконагруженного про...РИФ 2016, Как главенство данных меняет бизнес-процессы высоконагруженного про...
РИФ 2016, Как главенство данных меняет бизнес-процессы высоконагруженного про...
 
Kantara Overview June 2013
Kantara Overview June 2013Kantara Overview June 2013
Kantara Overview June 2013
 
Emerveillez vous [fr-gr] vvv
Emerveillez vous [fr-gr] vvvEmerveillez vous [fr-gr] vvv
Emerveillez vous [fr-gr] vvv
 
Microsoft word taiwan club chinese class tutor course
Microsoft word   taiwan club chinese class tutor courseMicrosoft word   taiwan club chinese class tutor course
Microsoft word taiwan club chinese class tutor course
 
רמי לוי רוצה להיות גדול
רמי לוי רוצה להיות גדולרמי לוי רוצה להיות גדול
רמי לוי רוצה להיות גדול
 

Similar to Grown-up javascript with AngularJS

Hilfe, wir brauchen ein Frontend
Hilfe, wir brauchen ein FrontendHilfe, wir brauchen ein Frontend
Hilfe, wir brauchen ein FrontendOPEN KNOWLEDGE GmbH
 
Embracing HTTP in the era of API’s
Embracing HTTP in the era of API’sEmbracing HTTP in the era of API’s
Embracing HTTP in the era of API’sVisug
 
From Design to Delivery
From Design to DeliveryFrom Design to Delivery
From Design to DeliveryJeff Cortez
 
Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...
Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...
Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...Reuven Lerner
 
Modern Web Technologies — Jerusalem Web Professionals, January 2011
Modern Web Technologies — Jerusalem Web Professionals, January 2011Modern Web Technologies — Jerusalem Web Professionals, January 2011
Modern Web Technologies — Jerusalem Web Professionals, January 2011Reuven Lerner
 
Modernizing i5 Applications
Modernizing i5 ApplicationsModernizing i5 Applications
Modernizing i5 ApplicationsZendCon
 
Easing ASP.NET Web and SQL Server Database Deployment with VS 2010 and MsDeploy
Easing ASP.NET Web and  SQL Server Database Deployment withVS 2010 and MsDeployEasing ASP.NET Web and  SQL Server Database Deployment withVS 2010 and MsDeploy
Easing ASP.NET Web and SQL Server Database Deployment with VS 2010 and MsDeployEduardo Castro
 
iPhone Development For Experienced Web Developers
iPhone Development For Experienced Web DevelopersiPhone Development For Experienced Web Developers
iPhone Development For Experienced Web Developerslisab517
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Rapid API Development with LoopBack/StrongLoop
Rapid API Development with LoopBack/StrongLoopRapid API Development with LoopBack/StrongLoop
Rapid API Development with LoopBack/StrongLoopRaymond Camden
 
The Enterprise Architecture You Always Wanted
The Enterprise Architecture You Always WantedThe Enterprise Architecture You Always Wanted
The Enterprise Architecture You Always WantedThoughtworks
 
(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery GuideMark Rackley
 
Notes (2012-06-08)
Notes (2012-06-08)Notes (2012-06-08)
Notes (2012-06-08)Chris Pitt
 
Using Ember to Make a Bazillion Dollars
Using Ember to Make a Bazillion DollarsUsing Ember to Make a Bazillion Dollars
Using Ember to Make a Bazillion DollarsMike Pack
 
Recipes for a successful production cloudfoundry deployment - CF Summit 2014
Recipes for a successful production cloudfoundry deployment - CF Summit 2014Recipes for a successful production cloudfoundry deployment - CF Summit 2014
Recipes for a successful production cloudfoundry deployment - CF Summit 2014Vinícius Carvalho
 
Cloud Foundry Cookbook: Recipes for a Successful Cloud Foundry Deployment in ...
Cloud Foundry Cookbook: Recipes for a Successful Cloud Foundry Deployment in ...Cloud Foundry Cookbook: Recipes for a Successful Cloud Foundry Deployment in ...
Cloud Foundry Cookbook: Recipes for a Successful Cloud Foundry Deployment in ...VMware Tanzu
 
Web Development using Ruby on Rails
Web Development using Ruby on RailsWeb Development using Ruby on Rails
Web Development using Ruby on RailsAvi Kedar
 
Scale, baby, scale!
Scale, baby, scale!Scale, baby, scale!
Scale, baby, scale!Julien SIMON
 

Similar to Grown-up javascript with AngularJS (20)

Hilfe, wir brauchen ein Frontend
Hilfe, wir brauchen ein FrontendHilfe, wir brauchen ein Frontend
Hilfe, wir brauchen ein Frontend
 
Embracing HTTP in the era of API’s
Embracing HTTP in the era of API’sEmbracing HTTP in the era of API’s
Embracing HTTP in the era of API’s
 
soa
soasoa
soa
 
From Design to Delivery
From Design to DeliveryFrom Design to Delivery
From Design to Delivery
 
Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...
Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...
Modern Web technologies (and why you should care): Megacomm, Jerusalem, Febru...
 
Modern Web Technologies — Jerusalem Web Professionals, January 2011
Modern Web Technologies — Jerusalem Web Professionals, January 2011Modern Web Technologies — Jerusalem Web Professionals, January 2011
Modern Web Technologies — Jerusalem Web Professionals, January 2011
 
Modernizing i5 Applications
Modernizing i5 ApplicationsModernizing i5 Applications
Modernizing i5 Applications
 
Easing ASP.NET Web and SQL Server Database Deployment with VS 2010 and MsDeploy
Easing ASP.NET Web and  SQL Server Database Deployment withVS 2010 and MsDeployEasing ASP.NET Web and  SQL Server Database Deployment withVS 2010 and MsDeploy
Easing ASP.NET Web and SQL Server Database Deployment with VS 2010 and MsDeploy
 
iPhone Development For Experienced Web Developers
iPhone Development For Experienced Web DevelopersiPhone Development For Experienced Web Developers
iPhone Development For Experienced Web Developers
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Rapid API Development with LoopBack/StrongLoop
Rapid API Development with LoopBack/StrongLoopRapid API Development with LoopBack/StrongLoop
Rapid API Development with LoopBack/StrongLoop
 
The Enterprise Architecture You Always Wanted
The Enterprise Architecture You Always WantedThe Enterprise Architecture You Always Wanted
The Enterprise Architecture You Always Wanted
 
(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide(Updated) SharePoint & jQuery Guide
(Updated) SharePoint & jQuery Guide
 
Notes (2012-06-08)
Notes (2012-06-08)Notes (2012-06-08)
Notes (2012-06-08)
 
Using Ember to Make a Bazillion Dollars
Using Ember to Make a Bazillion DollarsUsing Ember to Make a Bazillion Dollars
Using Ember to Make a Bazillion Dollars
 
Recipes for a successful production cloudfoundry deployment - CF Summit 2014
Recipes for a successful production cloudfoundry deployment - CF Summit 2014Recipes for a successful production cloudfoundry deployment - CF Summit 2014
Recipes for a successful production cloudfoundry deployment - CF Summit 2014
 
Cloud Foundry Cookbook: Recipes for a Successful Cloud Foundry Deployment in ...
Cloud Foundry Cookbook: Recipes for a Successful Cloud Foundry Deployment in ...Cloud Foundry Cookbook: Recipes for a Successful Cloud Foundry Deployment in ...
Cloud Foundry Cookbook: Recipes for a Successful Cloud Foundry Deployment in ...
 
Web Development using Ruby on Rails
Web Development using Ruby on RailsWeb Development using Ruby on Rails
Web Development using Ruby on Rails
 
Introducing LINQ
Introducing LINQIntroducing LINQ
Introducing LINQ
 
Scale, baby, scale!
Scale, baby, scale!Scale, baby, scale!
Scale, baby, scale!
 

Recently uploaded

Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...2toLead Limited
 
Establishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentEstablishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentThorsten Huelsmann
 
Python For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ emPython For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ emNho Vĩnh
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...MichaelBenis1
 
Large Language Models and Applications in Healthcare
Large Language Models and Applications in HealthcareLarge Language Models and Applications in Healthcare
Large Language Models and Applications in HealthcareAsma Ben Abacha
 
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...Chris Bingham
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriSafe Software
 
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...James Anderson
 
Key projects in AI, ML and Generative AI
Key projects in AI, ML and Generative AIKey projects in AI, ML and Generative AI
Key projects in AI, ML and Generative AIVijayananda Mohire
 
software-quality-assurance question paper 2023
software-quality-assurance question paper 2023software-quality-assurance question paper 2023
software-quality-assurance question paper 2023RohanMistry15
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerSaiLinnThu2
 
AGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfAGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfRodneyThomas28
 
Achieving Excellence IESVE for HVAC Simulation.pdf
Achieving Excellence IESVE for HVAC Simulation.pdfAchieving Excellence IESVE for HVAC Simulation.pdf
Achieving Excellence IESVE for HVAC Simulation.pdfIES VE
 
PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyMustafa Kuğu
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024BookNet Canada
 
AI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptxAI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptxUdaiappa Ramachandran
 
Low Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsLow Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsScyllaDB
 
Communities, networking and developer culture
Communities, networking and developer cultureCommunities, networking and developer culture
Communities, networking and developer cultureRavi Sanghani
 
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueVM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueShapeBlue
 

Recently uploaded (20)

Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
 
Establishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentEstablishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry development
 
Python For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ emPython For Kids - Sách Lập trình cho trẻ em
Python For Kids - Sách Lập trình cho trẻ em
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
 
Large Language Models and Applications in Healthcare
Large Language Models and Applications in HealthcareLarge Language Models and Applications in Healthcare
Large Language Models and Applications in Healthcare
 
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
Learning About GenAI Engineering with AWS PartyRock [AWS User Group Basel - F...
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & Esri
 
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
GDG Cloud Southlake 30 Brian Demers Breeding 10x Developers with Developer Pr...
 
Sue Loth: Job Search Strategies using personal connections
Sue Loth: Job Search Strategies using personal connectionsSue Loth: Job Search Strategies using personal connections
Sue Loth: Job Search Strategies using personal connections
 
Key projects in AI, ML and Generative AI
Key projects in AI, ML and Generative AIKey projects in AI, ML and Generative AI
Key projects in AI, ML and Generative AI
 
software-quality-assurance question paper 2023
software-quality-assurance question paper 2023software-quality-assurance question paper 2023
software-quality-assurance question paper 2023
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
 
AGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfAGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdf
 
Achieving Excellence IESVE for HVAC Simulation.pdf
Achieving Excellence IESVE for HVAC Simulation.pdfAchieving Excellence IESVE for HVAC Simulation.pdf
Achieving Excellence IESVE for HVAC Simulation.pdf
 
PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5Company
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
 
AI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptxAI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptx
 
Low Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & PitfallsLow Latency at Extreme Scale: Proven Practices & Pitfalls
Low Latency at Extreme Scale: Proven Practices & Pitfalls
 
Communities, networking and developer culture
Communities, networking and developer cultureCommunities, networking and developer culture
Communities, networking and developer culture
 
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueVM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
 

Grown-up javascript with AngularJS

Editor's Notes

  1. What do I mean &amp;#x201C;Grown-up&amp;#x201D; Javascript?\nLecture:\n- Different approaches of web app;\n- Key features of AngularJS;\n- An example of angular JS app;\n- Let&amp;#x2019;s dive into the code and see what it takes to build an app from scratch.\n\nQuestions:\n- Who writes in JS at least once a week?\n- Who tried high-level JS frameworks. Something more fancy then Jquery?\n- Who is familiar with TDD?\n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
  16. Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
  17. Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
  18. Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
  19. Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
  20. \n
  21. \n
  22. What is REST? It&amp;#x2019;s just a style of communication between services in the Internet which employs HTTP as a language.\n\nStateless\nCacheable\nClean\n
  23. It has verbs\n
  24. It has resources\n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. But let&amp;#x2019;s focus on web usage only. Now we have our server fully prepared to send us loads of data which we need.\n
  31. \n
  32. Javascript duck typing.\n
  33. \n
  34. \n
  35. \n
  36. If you build a really nice app, it will be recognized by the name;\nThere is still a way to do few almost static pages served by some backend, or CMS. But it will be separate app.\n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. Declarative: what the program should accomplish, rather than describing how to go about accomplishing it.\nAnd what is important, you don&amp;#x2019;t need to torture your brain each time you are going to write something like this. It comes very natural.\n
  54. \n
  55. \n
  56. Declatative: what the program should accomplish, rather than describing how to go about accomplishing it.\nAnd what is important, you don&amp;#x2019;t need to torture your brain each time you are going to write something like this. It comes very natural.\n
  57. \n
  58. \n
  59. Declatative: what the program should accomplish, rather than describing how to go about accomplishing it.\nAnd what is important, you don&amp;#x2019;t need to torture your brain each time you are going to write something like this. It comes very natural.\n
  60. Declatative: what the program should accomplish, rather than describing how to go about accomplishing it.\nAnd what is important, you don&amp;#x2019;t need to torture your brain each time you are going to write something like this. It comes very natural.\n
  61. Those of you who were into automated testing, know very well about this problem.\n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n