===== JavaScript =====

  * [[wp>Comparison of JavaScript frameworks]]
  * [[stackoverflow>394601|Which JavaScript framework (jQuery vs Dojo vs …)?]]
  * [[habrahabr>230449|18 неожиданностей при чтении исходного кода jQuery]]
  * [[habrahabr>189576|10 причин почему ваш проект должен использовать Dojo Toolkit]]
  * [[habrahabr>188580|Почему веб-приложения на мобильных платформах работают медленно]]

  * [[habrahabr>233805|Простой jQuery редактор для редактирования HTML5 текста (contenteditable) и сохранения с помощью AJAX]]
  * [[habrahabr>242503|Инкрементальные обновления]] -- наложение vcdiff, полученный с сервера, на версию из local storage.
  * [[https://events.yandex.ru/lib/talks/837/|Ускорение загрузки]] заменой URL на hash-URL
  * [[habrahabr>239169|Аппаратное ускорение]] -- использование аппаратно-ускоренного композитинга GPU.
  * [[habrahabr>254907|Web Bundle]] -- произвольные файлы упаковываются в один файл-контейнер в формате PNG, а на клиентской стороне доступ к ним организуется с помощью JS-библиотеки
  * [[habrahabr>247857|Все способы перебора массива в JavaScript]]
  * [[habrahabr>248111|Пишем быстрый и экономный код на JavaScript]]

  * [[habrahabr>234417|Несколько интересностей и полезностей для веб-разработчика #26]]

  * [[habrahabr>204848|Стиль написания кода на JavaScript для Uprock (перевод)]]
  * [[github>bevacqua/js|A quality conscious and organic JavaScript quality guide]]


==== MVC ====

  * [[habrahabr>259939|Так ли быстр ReactJS?]]
  * [[habrahabr>277113|Почему я больше не использую MVC-фреймворки]]
  * [[habrahabr>276747|Идеальный UI фреймворк]]
  * [[habrahabr>277485|6 впечатляющих веб-технологий 2015 года]]


=== AngularJS ===

  * [[youtube>i9MHigUZKEM|AngularJS Fundamentals In 60-ish Minutes]]


==== Testing ====

  * [[github>marmelab/gremlins.js|Gremlins.js — monkey testing библиотека для веб приложений]]


==== IDE ====

  * [[habrahabr>204538|Sublime + COLT. Добавь интеллекта своему IDE]]
  * [[http://download.aptana.com/studio3/plugin/install|Aptana Studio]]


==== Compressors ====

  * [[http://yui.github.io/yuicompressor/|YUI Compressor]] ([[http://alchim.sourceforge.net/yuicompressor-maven-plugin/|yuicompressor-maven-plugin]])
  * [[https://developers.google.com/closure/compiler/|Google Closure Compiler]] ([[googlecode>p/closure-compiler-maven-plugin|closure-compiler-maven-plugin]])

  * [[http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/|Introduction to JavaScript Source Maps]]


==== Questions answered ====

=== How to enable [[stackoverflowa>23889810/267197|CORS with secured services]]? ===

<note tip>
The following conditions should be met:
  * ''OPTIONS'' request should not be secured (Firefox fails)
  * The server should return the value different from ''*'' in ''Access-Control-Allow-Origin'' response header. The simplest is to return the value passed to the server in request header ''Origin''.
  * ''Access-Control-Allow-Methods'' and ''Access-Control-Allow-Headers'' should contain the list of allowed methods and headers which are allowed be passed to the server.

<code>
# By default everything is static content:
SetEnvIf	Request_URI	".*"				no-jk
# Exclude resources to be processed by RESTful service:
SetEnvIf	Request_URI	"^/backend/"			!no-jk
# Should not be secured and should always return HTTP 200:
SetEnvIf	Request_Method	"OPTIONS"			no-jk
# Fallback value:
SetEnv	http_origin	"*"				
SetEnvIf	Origin		"^https?://(localhost|.*\.mycompany\.org)(:[0-9]+)?$" http_origin=$0

Header	set Access-Control-Allow-Credentials	"true"
Header	set Access-Control-Allow-Origin		"%{http_origin}e"
Header	set Access-Control-Allow-Methods	"GET,POST,PUT,DELETE"
Header	set Access-Control-Allow-Headers	"Content-Type,Accept"

JkMount /* loadbalancer
</code>
</note>


=== How to POST file input using CORS? ===

<note question>
Suppose there is HTML form with ''%%<input type="file" id="file-input" /><textarea id="text-input" />%%'' elements. How to send the data of these two fields in one HTTP POST using CORS and jQuery?
</note>
<note tip>
The steps for implementation are:

  * The data need to be submitted as ''multipart/form-data'' -- this is the only way to represent different types of flavours in in request.
  * In Javascript the data should be assembled using ''[[https://developer.mozilla.org/en-US/docs/Web/API/FormData|FormData()]]'' class.
  * jQuery ''contentType'' option should be set to ''false'' so that jQuery does not attempt to auto-detect request content type.
  * Request headers should not contain ''Content-type''.

<code javascript|code sample>
var formData = new FormData();

var textInput = $('#text-input');

if (textInput.val().length > 0) {
	formData.append('listing-data', new Blob([textInput.val()], { type: "text/plain" }));
}

var fileInput = $('#file-input');

// fileInput[0] will dereference jQuery object and turn it to DOM object:
if (fileInput[0].files.length > 0) {
	formData.append('file-data', fileInput[0].files[0]);
}

jQuery.ajax({
  url:		"...",
  type:		"POST",
  contentType:	false,
  data:		formData,
  ...
});
</code>

That generates request something like that:

<code>
POST ... HTTP/1.1
Content-Type: multipart/form-data; boundary=71132861028891
X-Requested-With: XMLHttpRequest
Content-Length: 461

--------------------------71132861028891
Content-Disposition: form-data; name="plain-text"; filename="blob"
Content-Type: text/plain

... text ...
--------------------------71132861028891
Content-Disposition: form-data; name="file-data"; filename="input.zip"
Content-Type: application/octet-stream

... binary data ...
</code>

References:
  * [[stackoverflowa>14520473/267197|How can I upload files asynchronously with jQuery?]]
  * [[stackoverflow>11442367|How to set boundary while using XmlHttpRequest and FormData]]
  * [[https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript|Sending forms through JavaScript]]
  * [[stackoverflow>2198470|Uploading a file… without a file]]
</note>


==== JavaScript and Maven ====

See also:
  * [[http://blog.tfnico.com/2013/07/considerations-for-javascript-in-modern.html|Considerations for JavaScript in Modern (2013) Java/Maven Projects]]
  * [[stackoverflow>12334346|Dependency management and build tool like Maven for JS]]
  * [[http://blog.desarrolloagil.es/2013/05/developing-javascript-web-apps-with.html|Developing Javascript Web Apps with Maven: Initial Research]]

At the end of the day I would like to come to some ecosystem, which allows to see what version of library is used by a particular project.

For example: ''myproject:1.1 → mylibrary:0.1 → jquery:1.7.2''

The corresponding artefacts should be somehow packaged and deployed to Nexus in usual way and then included into end applications. I think that solution based on Maven is the simplest to approach. In relation to that I have explored few possibilities.


=== Based on [[http://mojo.codehaus.org/js-import-maven-plugin/|js-import-maven-plugin]] ===

:ADD: Pros:
  * This plugin provides the ready-to-use lifecycle for project (jslint, webminifier, [[http://js-testrunner.codehaus.org/|js-testrunner]]).
  * Plugin defines the standard directory tree (''src/main/js'').
  * Automatic resolution of libraries and dependencies in HTML file, thus the expression
    <code html>
<script type="text/javascript" src="${index.js}"></script>
<code>
    is converted to:
    <code html>
<script src="2-min.js" type="text/javascript"></script><script src="1-min.js" type="text/javascript"></script>
</code>

:DEL: Cons:
  * Plugin requires that certain resources are present (''src/main/resources/index.html''), even if not necessary.
  * The dependencies should be written in JavaScript itself which means that library should be [[https://github.com/amdjs/amdjs-api/blob/master/AMD.md|AMD]]fied:
    <code javascript>
/*global define */
define("xdm", function() {
      return window.xdm;
});
</code>
  * Requirements optionally can also be expressed in JavaScript:
    <code javascript>
/*global define, window */
require([ "jquery" ], function($) {
      $("p").click(function() {
            window.console.log("p clicked");
      });
});
</code>

  * Above means that additional dependency ([[https://github.com/jrburke/almond|almond.js]] – the provider of ''define()'' and ''require()'' functions) is automatically added as JavaScript dependency.
  * The produced artefact is the JavaScript library (''jquery-1.7.2.js'' and ''jquery-1.7.2-min.js'') thus it is not clean how to package e.g. JS+CSS+images.
  * Plugin has not been updated for a while, and [[http://mirrors.ibiblio.org/maven2/org/codehaus/mojo/|collection of JavaScript libraries]] is frozen on year 2012 which means that newer libraries should be packaged additionally (if necessary).
  * Few bugs are come across ([[codehaustracker>MJSIMP-11|MJSIMP-11]], [[codehaustracker>MJSIMP-6|MJSIMP-6]]).

Generally ''js-import-maven-plugin'' provides the functionality of build-time dependency checking (which is good), but also requires some run-time code (which is not good in my opinion).


=== Based on [[http://www.webjars.org/|WebJars]] ===

This approach does not provide any particular plugin for project lifecycle, which opens the doors to the variety of means by which the project can be packaged (''maven-jar-plugin'', ''maven-assebly-plugin'', whatever). However it assumes that resulting artefact is placed under ''META-INF/resources/webjars/${project.artifactId}/${project.version}'' so that later it can be served by Web container as static resource.

:ADD: Pros:
  * The [[http://mirrors.ibiblio.org/maven2/org/webjars/|collection of already packaged libraries]] is huge and up-do-date.
  * JavaScript dependencies are described using [[http://requirejs.org/docs/api.html|RequireJS]] (which is build on top of AMD) but dependencies can either be expressed in POM directly:
    <code xml>
<properties>
      <requirejs>
      {
            "paths": {
            "jquery": "jquery"
      },
            "shim": {
                  "jquery": { "exports": "$" }
            }
      }
      </requirejs>
</properties>
</code>
    or in the resource ''src/main/resources/webjars-requirejs.js'':
    <code xml>
requirejs.config({
  paths: { 
    "fullcalendar": webjars.path("fullcalendar", "fullcalendar"),
    "fullcalendar-css": webjars.path("fullcalendar", "fullcalendar")  
  },
  shim: { "fullcalendar": [ "jquery" ] }
});
</code>

  * In principle it is possible to use only wrapped-into-jar JavaScript libraries without dependency voodoo.

I haven't explored this approach in such details to catch any Cons, but I am sure they are.


=== Based on [[http://www.softec.lu/site/OpenSource/JavascriptMavenTools|Javascript Maven Tools]] ===

:HELP:


{{tag>image}}