Upload
andrew-hart
View
135
Download
0
Tags:
Embed Size (px)
DESCRIPTION
First presentation of the TallyJS user group.
Citation preview
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
• Amazon
• Netscape
• Mozilla
• Microsoft
POP QUIZ
Which company is credited with inventing JavaScript
• 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?
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;});