Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 11KB

4 vuotta sitten
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <!doctype html>
  2. <html lang=fr>
  3. <head>
  4. <!-- Always define the charset before the title -->
  5. <meta charset=utf-8>
  6. <title>Critique du livre Javascript pour le web 2.0 — Biologeek — David Larlet</title>
  7. <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
  8. <meta name="viewport" content="width=device-width, initial-scale=1"/>
  9. <!-- Fake favicon, to avoid extra request to the server -->
  10. <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  11. <link type="application/atom+xml" rel="alternate" title="Feed" href="/david/log/" />
  12. <link rel="manifest" href="/manifest.json">
  13. <link rel="stylesheet" href="/static/david/css/larlet-david-_J6Rv.css" data-instant-track />
  14. <noscript>
  15. <style type="text/css">
  16. /* Otherwise fonts are loaded by JS for faster initial rendering. See scripts at the bottom. */
  17. body {
  18. font-family: 'EquityTextB', serif;
  19. }
  20. h1, h2, h3, h4, h5, h6, time, nav a, nav a:link, nav a:visited {
  21. font-family: 'EquityCapsB', sans-serif;
  22. font-variant: normal;
  23. }
  24. </style>
  25. </noscript>
  26. <!-- Canonical URL for SEO purposes -->
  27. <link rel="canonical" href="https://larlet.fr/david/biologeek/archives/20070321-critique-du-livre-javascript-pour-le-web-20">
  28. </head>
  29. <body>
  30. <div>
  31. <header>
  32. <nav>
  33. <p>
  34. <small>
  35. Je suis <a href="/david/" title="Profil public">David Larlet</a>, <a href="/david/pro/" title="Activité professionnelle">artisan</a> du web qui vous <a href="/david/pro/accompagnement/" title="Activité d’accompagnement">accompagne</a><span class="more-infos"> dans l’acquisition de savoirs pour concevoir des <a href="/david/pro/produits-essentiels/" title="Qu’est-ce qu’un produit essentiel ?">produits essentiels</a></span>. <span class="more-more-infos">Discutons ensemble d’une <a href="/david/pro/devis/" title="En savoir plus">non-demande de devis</a>.</span> Je partage ici mes <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et <a href="/david/correspondances/2017/" title="Lettres hebdomadaires">correspondances</a>.
  36. </small>
  37. </p>
  38. </nav>
  39. </header>
  40. <section>
  41. <h1 property="schema:name">Critique du livre Javascript pour le web 2.0</h1>
  42. <article typeof="schema:BlogPosting">
  43. <div property="schema:articleBody">
  44. <img src="/static/david/biologeek/images/logos/javascript_web_20.png" alt="vignette" style="float:left; margin: 0.5em 1em;" property="schema:thumbnailUrl" />
  45. <p>En dépit du titre <del>racco</del> vendeur, <a href="http://www.editions-eyrolles.com/Livre/9782212120097/javascript-pour-le-web-2-0">ce livre est excellent</a>. Il a répondu parfaitement à mes besoins ce qui tout de même assez rare donc je vais au passage essayer d'établir la recette pour un bon livre.</p>
  46. <h2>Cible</h2>
  47. <p>Pour commencer un mot sur mon niveau en Javascript avant de commencer le livre&nbsp;:</p>
  48. <ul>
  49. <li>j'ai déjà eu l'occasion à plusieurs reprises de modifier des scripts pour mon usage personnel et professionnel&nbsp;;</li>
  50. <li>je connais les principes régissant l' «&nbsp;architecture » <abbr title="Asynchronous JavaScript And XML">AJAX</abbr>.</li>
  51. </ul>
  52. <p>Le but lorsque j'ai commencé ce livre était pour moi <strong>d'apprendre Javascript et de connaître les principales bibliothèques permettant de gagner du temps lors de mes développements.</strong></p>
  53. <h2>Apprendre Javascript</h2>
  54. <p>À la fois indispensable et souvent, avouons-le, indigeste dans certains ouvrages, les bases du langage utilisé sont ici brièvement rappelées. Pas de pages entières sur la bibliothèque standard mais plutôt une approche en quatre parties&nbsp;:</p>
  55. <ul>
  56. <li>les fondements&nbsp;;</li>
  57. <li>la Programmation Orientée Objet&nbsp;;</li>
  58. <li>la programmation <abbr title="Document Object Model">DOM</abbr>&nbsp;;</li>
  59. <li>la mise en œuvre d'AJAX.</li>
  60. </ul>
  61. <p>Ce chapitre va à l'essentiel, à ce qui est utile pour comprendre ce qui va suivre. Si vous programmez un peu, ça suffit, vous saurez où trouver la documentation si vous avez besoin de plus.</p>
  62. <p>Ce que j'ai pu retenir de cette partie, c'est qu'<strong>il y a peut-être pire que les <abbr title="Cascading Style Sheets">CSS</abbr> en termes de casse-tête inter-navigateur&nbsp;: Javascript !</strong> Et la solution de facilité est donc de passer par des bibliothèques (d'où leur nombre conséquent...).</p>
  63. <h2>Principales bibliothèques</h2>
  64. <p>J'ai découvert les différences entre les bibliothèques et <strong>je ne me doutais pas qu'il y avait autant d'orientations</strong>. Elles sont toutes décrites dans le détail et sont accompagnées d'exemples pratiques. Je me suis pour l'instant intéressé aux bibliothèques légères en utilisant <a href="http://script.aculo.us/">script.aculo.us</a> (pour les effets, en <a href="http://www.prendreuncafe.com/blog/post/2006/03/19/410-effets-javascript-avec-prototype-et-scriptaculous">démonstration chez NiKo</a>) couplée à <a href="http://www.bennolan.com/behaviour/">behaviour</a> (pour le côté non-intrusif/<abbr title="Cascading Style Sheets">CSS</abbr>), je ne sais pas si c'est très pertinent mais ça a le mérite de pas trop mal fonctionner pour le moment. Par contre j'ai une inquiétude pour behaviour qui n'est pas mise à jour depuis longtemps, le projet est mort&nbsp;? pas besoin de mettre à jour&nbsp;?</p>
  65. <p>Il manque la description d'une bibliothèque dont tout le monde parle&nbsp;: <a href="http://jquery.com/">jQuery</a>. Et c'est bien dommage car ça a l'air très prometteur, il faudra que je découvre les avantages et inconvénients par moi-même. <a href="http://www.jquery.info/spip.php?article21">Heureusement</a>, la <a href="http://blog.alsacreations.com/2007/01/24/329-jquery-une-bibliotheque-javascript-simple-et-efficace">documentation</a> <a href="http://www.supinfo-projects.com/fr/2006/introduction_ajax_jquery_fr/">francophone</a> ne <a href="http://weblogger.ch/blog/tag/jquery">manque pas</a>.</p>
  66. <p>Pour ce qui est des grosses bibliothèques graphiques, je ne m'y suis pas encore intéressé pour l'instant mais je saurais où trouver l'information si j'en ai besoin.</p>
  67. <h2>Études de cas</h2>
  68. <p>Il y a deux études de cas qui sont proposées, l'une utilisant l'<abbr title="Application Programming Interface">API</abbr> de Google maps, la seconde utilisant les services web de Yahoo! et d'Amazon. <strong>La description de tels exemples est à mon avis essentielle dans un livre pour comprendre l'architecture complète d'un mini-projet et passer outre les premières difficultés</strong> (comme ici les appels AJAX sur des serveurs distants). Même pour un langage de script, on sait très bien qu'il va au final y avoir des centaines, voire des milliers de lignes de code et il est important d'avoir des exemples montrant l'organisation d'un tel code <strong>avant</strong> que ça devienne illisible.</p>
  69. <h2>Astuces et bonnes pratiques</h2>
  70. <p>Le dernier chapitre traite des optimisations, des tests unitaires, de la documentation, finalement de l'ensemble des bonnes pratiques à avoir pour bien développer en Javascript. Par ailleurs certaines de ces pratiques sont rappelées au fil de l'ouvrage ce qui est pratique car généralement <strong>j'aime bien commencer à tester ce que je lis avant d'arriver à la fin du livre</strong> :-).</p>
  71. <p><strong>Au final, un très bon livre pour ceux qui étaient réticents comme moi à la déferlante AJAX et qui doivent s'y mettre sur le tard. Félicitations aux auteurs pour cette ressource !</strong></p>
  72. <p>Vous pouvez <a href="https://larlet.fr/david/biologeek/archives/20060219-critiques-de-livres-aux-editions-eyrolles/">consulter l'ensemble de mes critiques de livres</a>.</p>
  73. </div>
  74. </article>
  75. <footer>
  76. <h6 property="schema:datePublished">— 21/03/2007</h6>
  77. </footer>
  78. </section>
  79. <section>
  80. <div>
  81. <h3>Articles peut-être en rapport</h3>
  82. <ul>
  83. <li><a href="/david/biologeek/archives/20070218-critique-du-livre-uml-2-pour-les-developpeurs/" title="Accès à Critique du livre UML 2 pour les développeurs">Critique du livre UML 2 pour les développeurs</a></li>
  84. <li><a href="/david/biologeek/archives/20060615-critique-du-livre-redesign-web-20/" title="Accès à Critique du livre Redesign Web 2.0">Critique du livre Redesign Web 2.0</a></li>
  85. <li><a href="/david/biologeek/archives/20060219-critique-du-livre-le-zen-des-css/" title="Accès à Critique du livre le Zen des CSS">Critique du livre le Zen des CSS</a></li>
  86. </ul>
  87. </div>
  88. </section>
  89. <section>
  90. <div id="comments">
  91. <h3>Commentaires</h3>
  92. <div class="comment" typeof="schema:UserComments">
  93. <p class="comment-meta">
  94. <span class="comment-author" property="schema:creator">Hadrien.eu</span> le <span class="comment-date" property="schema:commentTime">21/03/2007</span> :
  95. </p>
  96. <div class="comment-content" property="schema:commentText">
  97. <p>De par mon expérience, je trouve jQuery intéressant sur certains points, notamment les sélecteurs basé sur la syntaxe de CSS3. Par contre, on se retrouve très rapidement limité en terme de programmation. Pour faire quelques effets sympa sans se prendre la tête à chercher des algorithmes complexes, jQuery est parfait. Par contre, pour des projets de plus grande envergure, il vaut mieux se tourner vers de API plus complètes comme Yahoo UI.</p>
  98. </div>
  99. </div>
  100. <div class="comment" typeof="schema:UserComments">
  101. <p class="comment-meta">
  102. <span class="comment-author" property="schema:creator">Olivier G.</span> le <span class="comment-date" property="schema:commentTime">21/03/2007</span> :
  103. </p>
  104. <div class="comment-content" property="schema:commentText">
  105. <p>D'ailleurs, nous avons mis en place une interface pour la traduction de l'API de jquery : <a href="http://www.jquery.info/?page=jq_trads&amp;lg=fr" title="http://www.jquery.info/?page=jq_trads&amp;lg=fr" rel="nofollow">www.jquery.info/?page=jq_...</a></p>
  106. </div>
  107. </div>
  108. <div class="comment" typeof="schema:UserComments">
  109. <p class="comment-meta">
  110. <span class="comment-author" property="schema:creator">nabil</span> le <span class="comment-date" property="schema:commentTime">10/03/2010</span> :
  111. </p>
  112. <div class="comment-content" property="schema:commentText">
  113. <p>je pense que javascript est comme meme assez ntéressante mais son utilisation doit bien être régie car beaucoup de gens n&#39;arrivent pas a bien l&#39;utiliser.</p>
  114. </div>
  115. </div>
  116. </div>
  117. </section>
  118. <footer>
  119. <nav>
  120. <p>
  121. <small>
  122. Je réponds quasiment toujours aux <a href="m&#x61;ilto:d&#x61;vid%40l&#x61;rlet&#46;fr" title="Envoyer un email">emails</a> (<a href="/david/signature/" title="Ma signature actuelle avec possibilité de chiffrement">signés</a>) et vous pouvez me rencontrer à Montréal. <span class="more-infos">N’hésitez pas à <a href="/david/log/" title="Être tenu informé des mises à jour">vous abonner</a> pour être tenu informé des publications récentes.</span>
  123. </small>
  124. </p>
  125. </nav>
  126. </footer>
  127. </div>
  128. <script src="/static/david/js/larlet-david-3ee43f.js" data-no-instant></script>
  129. <script data-no-instant>InstantClick.init()</script>
  130. </body>
  131. </html>