TallyJS - Meetup #1 - AngularJS

170
-1

Published on

First presentation of the TallyJS user group.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
170
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

TallyJS - Meetup #1 - AngularJS

  1. 1. TallyJS Introduction to frameworks and best practices. Examples with angularJS. March 6, 2014 Andrew Hart
  2. 2. OVERVIEW • Brief history of JavaScript • Best Practices • Module Design Pattern • AngularJS
  3. 3. POP QUIZ Which company is credited with inventing JavaScript • Google • Amazon • Netscape • Mozilla • Microsoft
  4. 4. 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.
  5. 5. EARLY JAVASCRIPT • Used to manipulate visual elements – EVENT DRIVEN DESIGN
  6. 6. 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
  7. 7. MODERN DAY JS ENVIRONMENTS • Browsers • Servers • Node.js • Databases • MongoDB • Drones • Complex 3D Games • Oculus Rift • Musical Instruments • Operating Systems • Chromium OS
  8. 8. 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
  9. 9. 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
  10. 10. MODULE PLUNKER EXAMPLE
  11. 11. 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.
  12. 12. 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
  13. 13. 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.
  14. 14. FOUR KEY INGREDIENTS
  15. 15. 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>
  16. 16. 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
  17. 17. 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; });
  18. 18. PUTTING IT ALL TOGETHER Plunker Example
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×