developer_guidelines.rst 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. .. raw:: html
  2. <div id="banner"><a href="https://github.com/jcbrand/converse.js/blob/master/docs/source/theming.rst">Edit me on GitHub</a></div>
  3. Developer guidelines
  4. ====================
  5. .. contents:: Table of Contents
  6. :depth: 2
  7. :local:
  8. If you want to work with the non-minified Javascript and CSS files you'll soon
  9. notice that there are references to a missing *node_modules* directory.
  10. Please follow the instructions below to create these directories and fetch Converse's
  11. 3rd-party dependencies.
  12. .. note::
  13. Windows environment: We recommend installing the required tools using `Chocolatey <https://chocolatey.org/>`_
  14. You will need Node.js (nodejs.install), Git (git.install) and optionally to build using Makefile, GNU Make (make)
  15. If you have trouble setting up a development environment on Windows,
  16. please read `this post <http://librelist.com/browser//conversejs/2014/11/5/openfire-converse-and-visual-studio-questions/#b28387e7f8f126693b11598a8acbe810>`_
  17. in the mailing list.:
  18. Installing the development and front-end dependencies
  19. -----------------------------------------------------
  20. We use development tools which depend on Node.js and npm (the Node package manager).
  21. If you don't have Node.js installed, you can download and install the latest
  22. version `here <https://nodejs.org/download>`_.
  23. Also make sure you have ``Git`` installed. `Details <http://git-scm.com/book/en/Getting-Started-Installing-Git>`_.
  24. .. note::
  25. Windows users should use Chocolatey as recommended above.
  26. .. note::
  27. Debian & Ubuntu users : apt-get install git npm nodejs-legacy
  28. Once you have *Node.js* and *git* installed, run the following command inside the Converse.js
  29. directory:
  30. ::
  31. make dev
  32. On Windows you need to specify Makefile.win to be used by running: ::
  33. make -f Makefile.win dev
  34. Or alternatively, if you don't have GNU Make:
  35. ::
  36. npm install
  37. This will install the Node.js development tools and Converse.js's front-end dependencies.
  38. The front-end dependencies are those javascript files on which
  39. Converse.js directly depends and which will be loaded in the browser.
  40. To see the dependencies, take a look at whats under the *devDependencies* key in
  41. `package.json <https://github.com/jcbrand/converse.js/blob/master/package.json>`_.
  42. .. note::
  43. After running ```make dev```, you should now have a new *node_modules* directory
  44. which contains all the external dependencies of Converse.js.
  45. If these directory does NOT exist, something must have gone wrong.
  46. Double-check the output of ```make dev``` to see if there are any errors
  47. listed. For support, you can write to the mailing list: conversejs@librelist.com
  48. Loading converse.js and its dependencies
  49. ----------------------------------------
  50. With AMD and require.js (recommended)
  51. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  52. Converse.js uses `require.js <http://requirejs.org>`_ to asynchronously load dependencies.
  53. If you want to develop or customize converse.js, you'll want to load the
  54. non-minified javascript files.
  55. Add the following two lines to the *<head>* section of your webpage:
  56. .. code-block:: html
  57. <link rel="stylesheet" type="text/css" media="screen" href="converse.css">
  58. <script data-main="main" src="node_modules/requirejs/require.js"></script>
  59. require.js will then let the main.js file be parsed (because of the *data-main*
  60. attribute on the *script* tag), which will in turn cause converse.js to be
  61. parsed.
  62. Without AMD and require.js
  63. ~~~~~~~~~~~~~~~~~~~~~~~~~~
  64. Converse.js can also be used without require.js. If you for some reason prefer
  65. to use it this way, please refer to
  66. `non_amd.html <https://github.com/jcbrand/converse.js/blob/master/non_amd.html>`_
  67. for an example of how and in what order all the Javascript files that converse.js
  68. depends on need to be loaded.
  69. Brief description of converse.js's dependencies
  70. -----------------------------------------------
  71. Converse.js relies on the following dependencies:
  72. * `JQuery <http://jquery.com/>`_ for DOM manipulation and `promises <http://api.jquery.com/promise/>`_.
  73. * `moment.js <http://momentjs.com/>`_ provides a better API for handling dates and times.
  74. * `Strophe.js <http://strophe.im/>`_ maintains the XMPP session, is used to
  75. build XMPP stanzas, to send them, and to register handlers for received stanzas.
  76. * `lodash <https://lodash.com/>`_ provides very useful utility functions.
  77. * `Backbone <http://backbonejs.org/>`_ is used to model the data as Models and
  78. Collections and to create Views that render the UI.
  79. * `backbone.overview <http://github.com/jcbrand/backbone.overview>`_ provides
  80. Overviews, which are to Views as Backbone Collections are to Models.
  81. * `pluggable.js <https://github.com/jcbrand/pluggable.js>`_ is the plugin
  82. architecture for Converse.js. It registers and initializes plugins and
  83. allows existing attributes, functions and objects on converse.js to be
  84. overridden inside plugins.
  85. When submitting a pull request
  86. ------------------------------
  87. Please follow the usual github workflow. Create your own local fork of this repository,
  88. make your changes and then submit a pull request.
  89. Follow the programming style guide
  90. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  91. Please read the `style guide </docs/html/style_guide.html>`_ and make sure that your code follows it.
  92. Add tests for your bugfix or feature
  93. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  94. Add a test for any bug fixed or feature added. We use Jasmine
  95. for testing.
  96. Take a look at `tests.html <https://github.com/jcbrand/converse.js/blob/master/tests.html>`_
  97. and the `spec files <https://github.com/jcbrand/converse.js/blob/master/tests.html>`_
  98. to see how tests are implemented.
  99. Check that the tests pass
  100. ~~~~~~~~~~~~~~~~~~~~~~~~~
  101. Check that all tests complete sucessfully.
  102. Run ``make check`` in your terminal or open `tests.html <https://github.com/jcbrand/converse.js/blob/master/tests.html>`_
  103. in your browser.