Twitter Bootstrap Question posted in

Packaging JavaScript based plug and play application – Twitter bootstrap

I am trying to build a plug and play web based application that I should be able to integrate with multiple other web applications (which are developed using AngalurJS ExtJS ReactJS etc). On click of a button, I should be able to launch a sliding menu. On this menu, I want to add Twitter like functionality. On the first half of the menu we will have a textbox (with features like autocomplete & hash tags). The second half with show a gird which will show already posted messages. The panel will be responsible to get and post data to server.

The challenge is, I want to add this functionality to multiple other web applications with minimum configurationchanges. The consuming web applications should be able use this plugin with ease. Certain challenges I see is bootstrap does not play well with ExtJs framework & I may face similar issues with other JavaScript frameworks.

Questions:

  1. How can I package this application? It has a panel with third party plugins (for autocomplete & other features), CSS & JavaScript. I can use web pack or Browserify but I want to keep the solution clean & don’t want to add unnecessary dependency.
  2. The consumers should be able to consume the bundlepackage with ease & just by adding some references (like my bundle, css file, jquery, bootstrap).

I think, I can get the desired result with a simple ReactJs app, which I can bundle using web pack. But this will introduce other dependency. I want to keep the web application lite and simple.

Tags:

2

Answers


  1. 0

    I can use web pack or Browserify but I want to keep the solution clean & don’t want to add unnecessary dependency.

    I don’t understand the problem. Using webpack or browserfy will only add devDependencies. You won’t ship it. You package won’t depend on it.
    You won’t be able to avoid using a bundler if you want to bundle it.

    The consumers should be able to consume the bundlepackage with ease & just by adding some references (like my bundle, css file, jquery, bootstrap).

    If you distribute it via npm (de facto standard in JS), they just regularly import the resources with the correct path (e.g. node_modules/package/styles.css).
    In npm you could also declare your peerDependencies (you mention jquery, bootstrap).

    Login or Signup to reply.
  2. 0

    1. How can I package this application?

    • You should minify all your HTML using a build tool like grunt or gulp
    • If you want to keep the count of different files low, you can merge all your CSS, HTML and maybe even Images (base64 encoded) into your module.js. Ideally you could end up with only delivering a single file.

    2. The consumers should be able to consume the bundlepackage with ease & just by adding some references.

    In that case they just need to include the script, like:

    <script src="app-module.js"></script>

    If you are able to use EcmaScript 2015, you might consider to package your plug-and-play app into a ES6 Module. Define your module.js simply as:

    export var myNumber = 333
export function myFunction() {
  ...
}

    And on the site, which is consuming your app, you simply add a dependency using the import keyword:

    import * as service from 'module'
console.log(service.myNumber) // 333

    Read more about ES6 Modules.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search