TallyJS - Meetup #1 - AngularJS

40 %
60 %
Information about TallyJS - Meetup #1 - AngularJS
Technology

Published on March 8, 2014

Author: drewth

Source: slideshare.net

Description

First presentation of the TallyJS user group.

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

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

Add a comment

Related presentations

Related pages

TallyJS (Tallahassee, FL) - Meetup

TallyJS is a group focused on JavaScript and related topics. Let's meet up to discuss and learn about new JavaScript frameworks and best practices. Whether ...
Read more

AngularJS Meetups - Meetup

See more local AngularJS Meetup groups ... RheinMain Ruby Cordova Angular Mysql RuCoAM Meetup. 1 RuCoAMs. Started Jan 27 in Frankfurt, Germany
Read more

AngularJS Vienna (Wien) - Meetup

"User group for AngularJS rookies, gurus and everybody just curious" There is now a Twitter tag for AngularJS Vienna #AngularJSVIE
Read more

AngularJS Meetups - Meetup

Finde Meetups zum Thema AngularJS und triff Gleichgesinnte in Deiner Stadt mit ähnlichen Interessen zu gemeinsamen Unternehmungen. Meetup: Finde deine ...
Read more

Angular Meetups - Meetup

Largest Angular Meetups Worldwide. 1 AngularJS London 3,171 Angularians ... RheinMain Ruby Cordova Angular Mysql RuCoAM Meetup. 1 RuCoAMs. Started Jan 27 ...
Read more

Angular Meetups - Meetup

Meetup: Finde deine Community! Spare 50% wenn du deine Meetup Gruppe vor dem 1. Feb ... 1 AngularJS London 3.115 Angularians | London, Großbritannien.
Read more

Angular — New features in AngularJS 1.4 — AngularJs ...

AngularJS 1.4 was released few weeks ago. This is the biggest upgrade after AngularJS 1.3 last October. Don’t be fooled, this is neither a maintenance ...
Read more

AngularJS.DE → Das deutsche Portal zu AngularJS

Interesse an Informationen rund um AngularJS auf deutsch? Bei uns findest du: Tutorials · Artikel · News · Workshops · Online-Buch ...
Read more

AngularJS Meetups - YouTube

AngularJS 1.2 and Beyond 1:14:05. Reproduzir a seguir; Reproduzir agora; March - AngularJS MTV Meetup Livestream: CRUD Apps with Angular and Breeze 52:56.
Read more