JavaScript per a desenvolupadors de C#

600 views

Published on

La introducció a la programació JavaScript moderna des de la perspectiva d'un programador en C#.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
600
On SlideShare
0
From Embeds
0
Number of Embeds
189
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • https://getfirebug.com/firebug-lite.js
  • Undefined = No sé de que m’estàs parlant o no m’has donat cap valor inicialNull = M’has dit que no té cap valor, explícitament Typeof(null) == object (és un bug de JS)Els wrappers també son objects, però és millor no fer-los servir
  • Validar amb JSLint per a veure el warning
  • JavaScript per a desenvolupadors de C#

    1. 1. JavaScript per adesenvolupadors de C# Edin Kapić
    2. 2. JavaScript != C# Edin Kapić
    3. 3. Qui sóc? @ekapicEdin KapićKey Consultant (SharePoint)ekapic@pasiona.com SUG.CAT SharePoint User Group Catalunya
    4. 4. JavaScript: “With or Without You” Brendan Eich “El pare de la criatura”
    5. 5. Com hem arribat fins aquí? 1995 1996 1997Netscape Navigator 2.0 Internet Explorer 3.0 ECMAScript Mocha/LiveScript JScript
    6. 6. 1999 2005 2006XMLHttpRequest Jesse James Garrett John Resig(OWA Exchange AJAX jQuery 2000)
    7. 7. TypeScript 2009 2010 2011 2012PhoneGap Node.js Windows 8 SharePoint 2013 TypeScript
    8. 8. Hem de donar el salt
    9. 9. Firebug / IE Dev Tools JSLint JsFiddle FirebugLes eines Lite
    10. 10. JavaScript és bo ...• Llenguatge dinàmic• Notació literal potent• “Loose-typed”• “JS is Lisp in C Clothing” (Douglas Crockford) http://bit.ly/Qn0qLi
    11. 11. ... però té coses dolentes• Variables globals implícites• Variable hoisting == 0 // false• Function hoisting 0 == 0 == 0 // // true true false == false // false• Prototype Leaking false == 0 false == undefined // // true false• false == null // false == null == undefined // true trn == 0 // true
    12. 12. JavaScript != C#
    13. 13. • C# • JavaScript – Talla pa – Talla pa – Té mecanismes de – Et pots fer mal seguretat – Es un tros de metall – És complex amb un mànec
    14. 14. Bo en C#, dolent en JS• La sintaxi semblant ens pot portar a fer coses que a C# són bones pràctiques• Però poden tenir conseqüències greus a JS• “If it walks like a duck...”
    15. 15. JS != C# 1: Tipus de dadesSimples Complexos• Number • Object• String • Array• Boolean • Function• Undefined • RegEx• Null • Date
    16. 16. JS != C# 2: Variables globals • Tota variable no assignada a un objecte, s’assigna a window • var a = 1; • window.a = 1; http://jsfiddle.net/wQDwN/
    17. 17. JS != C# 3: “Variable Hoisting”• Només dos nivells: global i funció – { } no crea àmbit de variable (com a C#)• La variable declarada puja fins el principi de la funció dins la qual està declarada – /*.....*/ var a = 1; http://jsfiddle.net/NE2Km/3/
    18. 18. Recomanació • Ser conscient dels tipus de dades • No contaminar window • Declarar variables a dalt de tot (fer el hoisting explícit)
    19. 19. JS != C# 4: Wrappers• JS estil C# var myVar = new Object(); var myArr = new Array();• JS estil pur var myVar = {}; var myArr = [];
    20. 20. Recomanació• No fer servir wrappers innecessàriament• Aprendre la notació literal d’objectes de JS
    21. 21. JS != C# 5: Truthy / FalseyValors que donen true Valors que donen false• "0" • false• "false" • 0 • ""• Objectes buits • null• Tota la resta • undefined • NaN
    22. 22. Recomanació• Simplifiquem els condicionals if(myVar != "" || myVar != undefined) if(myVar)• Inicialitzem els valors per defecte if(myVar == "") { myVar = "Hola"; } myVar = myVar || "hola";
    23. 23. JS != C# 6: L’operador ==• Comparació if(false == 0) // true if(false === 0) // false• L’operador == intenta convertir els valors i gairebé segur que no és el que volem
    24. 24. Comparació “indeterminista”(false == 0); // true(false == ""); // true(0 == ""); // true(null == false); // false(null == null); // true(undefined == undefined); // true(undefined == null); // true(NaN == null); // false(NaN == NaN); // false
    25. 25. Recomanació• Fem servir els operadors === i !== per defecte• No fan conversió de valors• Es comporten com els operadors “habituals” == i != de C#
    26. 26. JS != C# 7: Altres “perles”• parseInt()• L’operador + http://jsfiddle.net/tbMX2/• NaN http://jsfiddle.net/vVgB9/• “Prototype Leak”
    27. 27. Funcions
    28. 28. Funcions de JavaScript• Són objectes, per tant s’hi poden afegir propietats• Es poden passar com a paràmetres a altres funcions• Hi ha dues maneres de declarar funcions
    29. 29. Manera 1: Declaracions• La declaració de la funció es fa així function foo() { /* .... */ }• La funció declarada fa “hoisting” i és disponible a tot el codi JS, independentment de l’ordre http://jsfiddle.net/TQ6LG/
    30. 30. Manera 2: Expressions• També podem assignar la funció a una variable mitjançant una expressió: var foo = function () { /* ... */ };• En aquest cas no hi ha “hoisting”• Podem pensar que una declaració és realment una expressió posada a dalt de tot http://jsfiddle.net/NrQhM/
    31. 31. Equivalències• function foo() { /* .... */ }• var foo = function () { /* ... */ };• var foo = function foo () { /* ... */ };• var foo = function bar () { /* ... */ };• Les dues últimes es fan servir per a funcions recursives• Les expressions fan explícita la declaració
    32. 32. Codi d’un sol ús• Podem assignar una funció anònimament i no recollir-la• Útil per a executar un codi privat i d’una sola vegada• (function () { /* ... */ })(); http://jsfiddle.net/YAe9S/1/
    33. 33. Anidament de funcions• Les funcions són objectes i poden contenir altres funcionsvar foo = function() { function bar() { /* ... */ } return bar();};foo(); http://jsfiddle.net/XUswD/
    34. 34. Tancaments (Closures)• El tancament és una manera d’associar la funció amb els seus paràmetres d’entrada – És el manteniment de les variables locals desprès de que la funció hagi retornatvar bind = function(x) { return function(y) { return x + y; };}var plus5 = bind(5);alert(plus5(3)); http://jsfiddle.net/xWAm4/
    35. 35. Recomanacions• Dedicar temps per a jugar amb les funcions en JS és imprescindible – Hi ha molts exemples que es poden provar amb JsFiddle• Comprendre els tancaments és important per a entendre els event handlers i encapsulament
    36. 36. JavaScript al segle XXI
    37. 37. Anem tirant?
    38. 38. O estem al dia?
    39. 39. Regla #1: UnobtrusiveJavaScript• El codi JS s’ha d’afegir sense impactar el HTML de la pàgina <input type="text" name="date“ onchange="validateDate()" /> window.onload = function() { document.getElementById(date).onchange = validateDate; };
    40. 40. Regla #2: Modularitat• El nostre codi JS no pot col·lisionar amb qualsevol altre codi JS present• Encapsulem el nostre codi en namespaces• Fem servir try/catch
    41. 41. Mètodes d’encapsulament• Cap (objecte window)• Tot privat (funció anònima auto-executada)• Tot públic (objecte literal)• Barreja public/privat (Revealing Module)
    42. 42. Objecte literalvar car = { status: "off", start: function() { this.status = "on"; }, getStatus: function() { return "the car is " + this.status; }};car.start();alert(car.getStatus()); http://jsfiddle.net/DY2Zw/
    43. 43. Revealing Modulevar car = (function() { var pubCar = {}, var innerStatus = "off"; pubCar.start = function() { innerStatus = "on"; } pubCar.status = function() { return "the car is “ + innerStatus; } return pubCar;}());car.start();alert(car.status()); http://jsfiddle.net/AUzNT/
    44. 44. Recomanacions• Fer servir Revealing Module per a tenir encapsulament totalment controlat per nosaltres• Aïllar-nos d’altres llibreries http://jsfiddle.net/uKuLw/• Fer servir objecte literal per a fer objectes senzills (p.ex. DTOs) – La sintaxi és diferent
    45. 45. Regla #3: Abstracció • Cal abstreure’s dels detalls del navegador concret • Existeixen llibreries que ens unifiquen les diferències: jQuery, AmplifyJS,
    46. 46. Llibreries que cal conèixer• MVVM: KnockoutJS• Plantilles: JsRender• Notificacions: SignalR, Toastr• Tests unitaris: QUnitJS• BDD: Jasmine• IoC/DI: Inject, RequireJS
    47. 47. KnockoutJS • Possibilita al patró MVVM (Model-View-ViewModel)• Automatitza el binding bidireccional entre el viewmodel (JS) i la vista (HTML) http://knockoutjs.com/ Demo: http://knockoutjs.com/examples/helloWorld.html
    48. 48. JsRender• Permet fer “plantilles” d’elements HTML i enllaçar-les amb dades https://github.com/BorisMoore/jsrenderDemo: http://borismoore.github.com/jsrender/demos/step-by-step/05_for-tag.html
    49. 49. SignalR• Notificacions asíncrones de servidor a client i vice-versa• Útil per a notificacions de sistema a l’usuari• http://signalr.net• Demo: http://zooplet.com/tictactoe/
    50. 50. Toastr • Notificacions tipus “torrada” • https://github.com/CodeSeven/toastr • Demo: http://CodeSeven.github.com/toastr
    51. 51. QUnitJS http://qunitjs.com/• Proves unitàries per al codi de JavaScript• Executable dins el navegadorDemo: http://jsfiddle.net/booyaa/kdEtk/
    52. 52. Jasmine• Proves funcionals amb JavaScript• Descriuen el resultat esperat i poden combinar- se per a formar casos d’ús• https://github.com/pivotal/jasmine• Demo: http://pivotal.github.com/jasmine/
    53. 53. Inject / RequireJS• Gestió de dependències entre components JS• https://github.com/linkedin/inject• Demo: http://bit.ly/wu2Pe1• Alternativa: RequireJS• http://requirejs.org
    54. 54. Microsoft TypeScript• És un llenguatge basat en JavaScript• Afegeix la comprovació en temps de compilació de referències, tipus, classes i interfícies• (Trans)compila a JavaScript “pur”• Disponible per a VS2012• http://www.typescriptlang.org/
    55. 55. Resum
    56. 56. Recomanacions• Invertir temps en aprendre els principis de JS i experimentar amb els exemples• Repassar el codi existent amb JSLint• Tenir en compte les llibreries de JS com a factor arquitectònic a les aplicacions• JS està aquí per a quedar-s’hi
    57. 57. Bibliografia• Douglas Crockford “JavaScript: The Good Parts” (O’Reilly)• Addy Osmani “JavaScript Design Patterns” http://bit.ly/bMyoQ9• http://jsbooks.revolunet.com/

    ×