You are here

README.txt in Decoupled Blocks 8

CONTENTS OF THIS FILE
---------------------

 * Introduction
 * Requirements
 * Installation
 * Configuration
 * Developing for PDB
 * Maintainers


INTRODUCTION
------------

Welcome to Decoupled Blocks. This module is a javascript-framework-agnostic,
progressive decoupling tool to allow custom blocks to be written by front end
developers in the javascript framework of their choice, without needing to know
any Drupal API's.

It keeps individual components encapsulated in their own directories containing
all the css, js, and template assets necessary for them to work, and using an
info.yml file to declare these components and their framework dependencies to
Drupal.

 * For a full description of this module, visit the project page:
   https://www.drupal.org/sandbox/mrjmd/2664138


REQUIREMENTS
------------

There are no special requirements at this time. In the future, we may abstract
some items to a component_api project.


INSTALLATION
------------

 * Enable the module and at least one javascript framework sub-module (Angular 2
   is the most fleshed out currently).
 * For Angular 2 use:
     - Before enabling the Angular 2 sub-module you must navigate to the pdb_ng2
       directory and run `npm install`.
     - Before turning on production module in the module configuration form,
       make sure to run `tsc` from the pdb_ng2 directory to compile your .ts
       files into .js.


CONFIGURATION
-------------

 * Navigate to a block placement UI (core block UI or Panels, for example).

 * Add a block, and select one of the PDB example components.

 * Save your page and the decoupled component will appear!


DEVELOPING FOR PDB
------------------

 * Writing your own components:

   - Writing components for existing frameworks should be straightforward, write
     them as usual and add an info.yml file declaring them to the module. Some
     framework implementations may provide extra tooling or require additional
     boilerplate to use full functionality, see their individual README.txt
     files for more information.

   - When you find gaps in functionality you need, post them to the github issue
     queue, as this module is still in early development stages.

 * Writing your own framework definitions:

   - By extending the main pdb block and deriver classes and adding a library
     file, you can craft your own js framework definition modules! We would love
     to see support for other frameworks.

   - For now you can use the existing pdb_ng2 and pdb_react as examples for
     how to proceed.

 * Options for getting data from Drupal in components

   - If you give your component a required context, it will only appear on pages
     with that context available, and automatically pass that data forward using
     drupalSettings.pdb.contexts. See the ng2_example_node component for sample
     code.

   - If your component requires instance configuration you can add fields in the
     info.yml file that will be displayed on block placement for the site
     builder to fill out. Configuration values are passed to the client via
     drupalSettings.pdb.

   - Use a JSON endpoint.

   - Use the GraphQL module.


MAINTAINERS
-----------

Author:
 * Matt Davis (mrjmd) - https://www.drupal.org/u/mrjmd
    <matt.davis at yourdrupaldev DOT com>

Current maintainers:
 * Matt Davis (mrjmd) - https://www.drupal.org/u/mrjmd
   <matt.davis at yourdrupaldev DOT com>

Early Contributors:
 * Jason Smith
 * Jeff Lu
 * Shawn Stedman
 * Emma Cortes
 * Diego Barahona
 * Mark Casias
 * Bob Kepford
 * Derek Reese
 * Adam Globus-Hoenich
 * Ted Bowman

This project has been sponsored by:
 * Mediacurrent
   Mediacurrent helps organizations build highly impactful, elegantly designed
   Drupal websites that achieve the strategic results they need. Visit
   http://www.mediacurrent.com for more information.

 * Acquia
   Commercially Supported Drupal. Visit http://acquia.com for more information.

File

README.txt
View source
  1. CONTENTS OF THIS FILE
  2. ---------------------
  3. * Introduction
  4. * Requirements
  5. * Installation
  6. * Configuration
  7. * Developing for PDB
  8. * Maintainers
  9. INTRODUCTION
  10. ------------
  11. Welcome to Decoupled Blocks. This module is a javascript-framework-agnostic,
  12. progressive decoupling tool to allow custom blocks to be written by front end
  13. developers in the javascript framework of their choice, without needing to know
  14. any Drupal API's.
  15. It keeps individual components encapsulated in their own directories containing
  16. all the css, js, and template assets necessary for them to work, and using an
  17. info.yml file to declare these components and their framework dependencies to
  18. Drupal.
  19. * For a full description of this module, visit the project page:
  20. https://www.drupal.org/sandbox/mrjmd/2664138
  21. REQUIREMENTS
  22. ------------
  23. There are no special requirements at this time. In the future, we may abstract
  24. some items to a component_api project.
  25. INSTALLATION
  26. ------------
  27. * Enable the module and at least one javascript framework sub-module (Angular 2
  28. is the most fleshed out currently).
  29. * For Angular 2 use:
  30. - Before enabling the Angular 2 sub-module you must navigate to the pdb_ng2
  31. directory and run `npm install`.
  32. - Before turning on production module in the module configuration form,
  33. make sure to run `tsc` from the pdb_ng2 directory to compile your .ts
  34. files into .js.
  35. CONFIGURATION
  36. -------------
  37. * Navigate to a block placement UI (core block UI or Panels, for example).
  38. * Add a block, and select one of the PDB example components.
  39. * Save your page and the decoupled component will appear!
  40. DEVELOPING FOR PDB
  41. ------------------
  42. * Writing your own components:
  43. - Writing components for existing frameworks should be straightforward, write
  44. them as usual and add an info.yml file declaring them to the module. Some
  45. framework implementations may provide extra tooling or require additional
  46. boilerplate to use full functionality, see their individual README.txt
  47. files for more information.
  48. - When you find gaps in functionality you need, post them to the github issue
  49. queue, as this module is still in early development stages.
  50. * Writing your own framework definitions:
  51. - By extending the main pdb block and deriver classes and adding a library
  52. file, you can craft your own js framework definition modules! We would love
  53. to see support for other frameworks.
  54. - For now you can use the existing pdb_ng2 and pdb_react as examples for
  55. how to proceed.
  56. * Options for getting data from Drupal in components
  57. - If you give your component a required context, it will only appear on pages
  58. with that context available, and automatically pass that data forward using
  59. drupalSettings.pdb.contexts. See the ng2_example_node component for sample
  60. code.
  61. - If your component requires instance configuration you can add fields in the
  62. info.yml file that will be displayed on block placement for the site
  63. builder to fill out. Configuration values are passed to the client via
  64. drupalSettings.pdb.
  65. - Use a JSON endpoint.
  66. - Use the GraphQL module.
  67. MAINTAINERS
  68. -----------
  69. Author:
  70. * Matt Davis (mrjmd) - https://www.drupal.org/u/mrjmd
  71. Current maintainers:
  72. * Matt Davis (mrjmd) - https://www.drupal.org/u/mrjmd
  73. Early Contributors:
  74. * Jason Smith
  75. * Jeff Lu
  76. * Shawn Stedman
  77. * Emma Cortes
  78. * Diego Barahona
  79. * Mark Casias
  80. * Bob Kepford
  81. * Derek Reese
  82. * Adam Globus-Hoenich
  83. * Ted Bowman
  84. This project has been sponsored by:
  85. * Mediacurrent
  86. Mediacurrent helps organizations build highly impactful, elegantly designed
  87. Drupal websites that achieve the strategic results they need. Visit
  88. http://www.mediacurrent.com for more information.
  89. * Acquia
  90. Commercially Supported Drupal. Visit http://acquia.com for more information.