Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flexible dep management #484

Closed
wants to merge 8 commits into from

Conversation

spalger
Copy link
Contributor

@spalger spalger commented Sep 12, 2013

Reorganized the repo, creating a src and dist directory as well as defining the build process using Grunt.

Structure

dist/
src/
  app/ # Kibana specific code
    components/  # Generic utilities/classes written outside of Angular
    controllers/
      all.js # Index/single point of entry for the controller
      dash.js
      row.js
    directives/
      # same structure as controllers
    filters/
      # same structure as controllers
    services/
      # same structure as controllers
    panels/
      # Each panel must have a module.html, and module.js only if they have a
      # controller. All files specific to a single panel should be in its dir
      query/
      bettermap/
      etc..
    partials/
      # The shared templates for the application
    dashboards/
  vendor/
    # Code from 3rd party vendors
    jquery/
      jquery-1.8.0.js
    bootstrap/
    require/
    etc..
  css/
  font/
  img/
  index.html

RequireJS

$LABjs has been replaced with RequireJS as it provides plug-ins for css, text, and maps file paths to simple names so we can declare deps as require(['jquery', 'angular']) and at the same times have deps which depend on others. The project now uses the r.js optimizer as well to concatenate files and remove the files that are no longer needed.

Notes

  • In general, each "piece" of the application is defined in it's own file, unless it's so small that it wouldn't make the code any more readable (like filters).
  • Each module RequireJS uses should be addressable with it's own URL.
  • The general dependencies for the app are mapped to simple names like "vendor/jquery/jquery-1.8.0.js" -> "jquery". This allows us to simply switch out the source for a module in the future, and makes things a lot more readable.
  • Using the css and text plug-ins in the module definition inlines that file in the module
  • I created a tmpl plug-in that used the text plug-in to cache a template string, and then pushed it into Angular's $templateCache. When in use, the app failed to boot even though the templates were loading properly. (seemed like the initial refresh event never got called). Couldn't figure out how to make it work so it's just sitting in vendor/require/tmpl.js.
  • To require a file within a module use $scope.require which. See the bettermap module for an example.
  • If an Angular module was created after the app was bootstrapped, it must be passed to app.useModule before anything is defined inside it (controllers, directives, etc).

kibanaPanel directive

In order to ensure that a panel's module is loaded before its template, the kibanaPabel directive was modified to do the heavy lifting (I first created a loadKibanaPanel directive, but it seemed strange to have both). The directive will first use RequireJS to load the panel's module.html, if it finds a controller within the template, it will them load module.js. Once both are loaded, the module is inserted into the DOM and compiled.

Build Process

Thanks to how awesome grunt and its plug-ins are, this was probably the simplest part of this whole process.

The steps carried out by the build process are as follows:

  1. Copy & minify all of the .html files from src to a temp directory
    • Note that the HTML minifier breaks Angular expessions within HTML attributes wrapped in single quotes but contain double-quotes. We should always use double-quotes for HTML attributes and " for double-quotes inside attributes.
      • works: <a ng-click="function('arg')"></a>
      • doesn't work: <a ng-click='function("arg")'></a>
  2. Compile the bootstrap .less from src to temp
  3. Copy & minify all of the .css files from src to temp
  4. Copy all of the remaining files that we want in the dist (.js, .json, images)
  5. Run the RequireJS optimizer on the temp directory, writing the now minified css, html, and js inline, and removing the js files that are no longer needed.
    • This process will create a module for app (based on app.js) that includes all of the shared dependencies (a merged list, based on the deps declared in the file and the ones defined in the Gruntfile)
    • Modules are also created for each panel by reading the folders in the panels directory. Those modules exclude any file already included in the app module, and include any other dependencies that require can find for them.
  6. Delete the temp directory

this is my first time setting-up up a build process, critisism appreciated

Up to date

I have manually applied changes made since I forked the repo, since filenames don't map properly. I've stashed some patch files in the project root to keep track of what I've merged, but obviously those don't need to be merged.

Spencer Alger added 8 commits September 10, 2013 16:11
…, serivce, controller, and filter files, wrapped all files in requirejs module definitions, setup a test/concat/minify grunt task (build) that will output the modified src into the dist directory.
…tty confusing when

it did and didn't apply. Also fixed the scope issue between the editor and the panels module.html.
…y which

can override the context that require is called in. The method wrapps the callbacks
in $scope.$apply so that it doesn't need to be done in each place require is needed.
…when a controller is detected in the module.html template.
spalger pushed a commit to spalger/kibana that referenced this pull request Sep 13, 2013
@spalger spalger mentioned this pull request Sep 13, 2013
@spalger
Copy link
Contributor Author

spalger commented Sep 13, 2013

Remerged these changes in #492 so that it would be simple enough to merge with a click.

@spalger spalger closed this Sep 13, 2013
rashidkpc pushed a commit that referenced this pull request Sep 13, 2013
@spalger spalger deleted the flexible-dep-management branch October 8, 2014 20:35
harper-carroll pushed a commit to harper-carroll/kibana that referenced this pull request Jul 11, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant