tallyjs - meetup #1 - angularjs

March 6, 2014Andrew Hart

TallyJSIntroduction to frameworks and best practices. Examples with angularJS.

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’

Thanks, Denmark

Before V8: JavaScript was either interpretedor executed as bytecode

With V8: JavaScript is compiled and executed as machine code

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

• 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?

MODULE

PLUNKER EXAMPLE

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.

FOUR KEY INGREDIENTS

CONTROLLER

• Sets up a new $scope • An object that represents the application model• Arranged hierarchically• Plunker Example

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>

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