This document provides an introduction and overview of frameworks and best practices in JavaScript, with examples using AngularJS. It discusses the history of JavaScript, best practices including modularization and testing, and what modules and frameworks are. It then explains the key components of AngularJS including controllers, directives, services, and how they work together.

1. March 6, 2014
Andrew Hart
TallyJS
Introduction to frameworks and best practices.
Examples with AngularJS.

2. About Me:
Studied Chemistry and Math – Graduated in 2013
Partner at Selenko
Front-end engineer and designer using AngularJS

3. OVERVIEW
• Brief history of JavaScript
• Best Practices
• Module Design Pattern
• AngularJS

4. POP QUIZ
Which company is credited with inventing JavaScript
• Google
• Amazon
• Netscape
• Mozilla
• Microsoft

5. 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.

6. EARLY JAVASCRIPT
• Used to manipulate visual elements – EVENT DRIVEN DESIGN

7. IN 2008, GOOGLE SAID: ‘LET THERE BE V8’
Thanks, Denmark

8. MODERN DAY JS ENVIRONMENTS
• Browsers
• Servers
• Node.js
• Databases
• MongoDB
• Drones
• Complex 3D Games
• Oculus Rift
• Musical Instruments
• Operating Systems
• Chromium OS

9. 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

10. • They’re DRY
• Makes your code easier to maintain, easier to change and easier to read
Why Modules?
• 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
What is a Module?

11. MODULE
PLUNKER EXAMPLE

12. WHAT IS A JAVASCRIPT FRAMEWORK?
• JS had a not-so-good wrap among developers
• Complex handling of browser differences
• jQuery

13. 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

15. 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.

16. FOUR KEY INGREDIENTS

17. CONTROLLER
• Sets up a new $scope
• An object that represents the application model
• Arranged hierarchically
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingCtrl',
['$scope',function($scope) {
$scope.greeting = 'Hola!';
}]);
Script.js DOM
<div ng-app="myApp">
<div ng-
controller="GreetingCtrl">
{{ greeting }}
</div>
</div>

18. DIRECTIVE
• DOM things
• Custom elements, class and attributes
• Domain Logic
• There are some powerful directives provided for you
• You can also write your own custom directives – VERY POWERFUL
• Directives can also have their own scope – Plunker Example
• This is where the event listeners are declared
• Must pass everything you need into the directive

19. 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;
});

20. PUTTING IT ALL TOGETHER
• Plunker Example