• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
TallyJS - Meetup #1 - AngularJS

TallyJS - Meetup #1 - AngularJS



First presentation of the TallyJS user group.

First presentation of the TallyJS user group.



Total Views
Views on SlideShare
Embed Views



1 Embed 32

http://selenko.azurewebsites.net 32



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    TallyJS - Meetup #1 - AngularJS TallyJS - Meetup #1 - AngularJS Presentation Transcript

    • TallyJS Introduction to frameworks and best practices. Examples with angularJS. March 6, 2014 Andrew Hart
    • OVERVIEW • Brief history of JavaScript • Best Practices • Module Design Pattern • AngularJS
    • POP QUIZ Which company is credited with inventing JavaScript • Google • Amazon • Netscape • Mozilla • Microsoft
    • POP QUIZ Which company is credited with inventing JavaScript • Google • Amazon • Netscape – in 1995 • Mozilla • Microsoft JavaScript was built by Brenden Eich in 10 days.
    • EARLY JAVASCRIPT • Used to manipulate visual elements – EVENT DRIVEN DESIGN
    • IN 2008, GOOGLE SAID: ‘LET THERE BE V8’ Before V8: JavaScript was either interpreted or executed as bytecode With V8: JavaScript is compiled and executed as machine code Thanks, Denmark
    • MODERN DAY JS ENVIRONMENTS • Browsers • Servers • Node.js • Databases • MongoDB • Drones • Complex 3D Games • Oculus Rift • Musical Instruments • Operating Systems • Chromium OS
    • BEST PRACTICES • Whatever you think is a best practice – AUTOMATE IT - GruntJS 1. JSHint, JSLint 2. Modularize 3. Keep DOM access to a minimum 4. Don’t yield to the browser 5. Testing – Unit Test & e2e
    • What is a Module? • Transcends frameworks and libraries • It is a way to structure your js code • Create an anonymous function and execute it immediately • All of the code that runs inside that function lives in a closure • Provides: Privacy and State Why Modules? • They’re DRY • Makes your code easier to maintain, easier to change and easier to read
    • WHY USE A JS FRAMEWORK? • In designing JavaScript applications, there are many architectural and design challenges that arise. To name a few: • • • • How to update the DOM Communicating with a server (AJAX) Testing Organization of the JavaScript code • JS frameworks tackle these challenges for you.
    • ANGULARJS • Open Source JavaScript framework developed and maintained by Google • Initial release was in 2009 • Turns HTML in a declarative programming language ready to serve up dynamic content through two-way data binding
    • DESIGN GOALS • Decouple DOM manipulation from application logic. This improves the testability of the code. • Regard application testing as equal in importance to application writing. Testing difficulty is dramatically affected by the way the code is structured. • Decouple the client side of an application from the server side. This allows development work to progress in parallel, and allows for reuse of both sides. • Guide developers through the entire journey of building an application: from designing the UI, through writing the business logic, to testing.
    • CONTROLLER • Sets up a new $scope • An object that represents the application model • Arranged hierarchically • Plunker Example Script.js var myApp = angular.module('myApp',[]); myApp.controller('GreetingCtrl', ['$scope',function($scope) { $scope.greeting = 'Hola!'; }]); DOM <div ng-app="myApp"> <div ngcontroller="GreetingCtrl"> {{ greeting }} </div> </div>
    • DIRECTIVE • DOM things • There are some powerful directives provided for you • You can also write your own custom directives – VERY POWERFUL • Custom elements, class and attributes • Focus on Domain Logic in the html • Directives can also have their own scope – Plunker Example • This is where the event listeners are declared
    • SERVICE • Data things • Factory Functions – Services are singletons • Inject Services into Controllers, Directives and even other Services var myModule = angular.module('myModule', []); myModule.factory('serviceId', function() { var shinyNewServiceInstance; return shinyNewServiceInstance; });
    • PUTTING IT ALL TOGETHER Plunker Example