Develop Reference

convert angular 2 application to integrate able sdk

i have a angular 2 application. I was wondering if i could convert this application to an integrate-able sdk which other applications can use by adding script tags in their headers. If this is not possible can anyone provide any tutorial link which shows how can i build a simple sdk which can be integrated in other applications. thank you.

Of course you can! In javascript terms, it's not called "SDK" but "module".
The most popular module manager is called NPM.
So you can follow this tutorial to package your "application" as NPM module, then it will be easy for other js developper to integrate it inside their own projects (using the tags, services, directives you defined.
Here is a good post about it
Cheers!
EDIT : if you want to use your angular components/modules outside in non-angular application, you can follow this one. In the example it is used with React app but it will work with any html5-compliant browsers.
If you want to target also non-compatible browsers, you should add a polyfill

Using VueJS to create a embeddable Chat Widget for websites

I'm building a product similar to Intercom live chat widget (tawto, drift, crisp etc). Basically, what it will do is add a widget to users website and then render a chat box (in simple words). I'm planning to use VueJS for the entire project.
So here are my thoughts.
We provide users an embeddable js snippet. What it will do is add a div to the body with id = "app" (or something like that). Then the same script will inject VueJS compiled code. Will also add some external scripts like socket io, some CSS libraries etc.
Here are my concerns:
Should I build the project using CDN vue.min.js or the CLI with compiled codes? (I'm comfortable with CLI)
I need to isolate my CSS libraries from users website, that possible with 'scoped' style in VueJS right?
If I use CLI version, will it work in a subdomain, inner pages, and links? Unlike a full website, I'm going to use VueJS to create a widget on the website

I have used vuejs to create widget before so this is your answer:
You should build a normal project, import vue and compile it with all of your code to 1 file.
Yes
Yes
Yes

Searching for a ReactJS Runtime Plugin Concept

does ReactJS support some plugin loading at runtime?
I have developed a client app based on ReactJS. It should be possible for other users of my software to extend the Web UI by writing custom extension.
My ReactJS Base application is already transpiled (webpack + babel) to a build.js file.
Other user should create there own .js file which are loaded by the browser separately. At runtime browser should check for custom extension add these to the application.
Does anyone has a hint how to do this with ReactJS?
Cheers,
Manuel

You can implement a custom javascript function on your main component to add extensions, i.e.:
YourPlugin.loadExtensions(MyCustomExtension);
I've done this for a react component to be mount on a specific node only, but I think this approach should work in your case as well.

Packaging JavaScript based plug and play application

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 configuration\changes. 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:
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.
The consumers should be able to consume the bundle\package 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.

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 bundle\package 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).

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 bundle\package 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.

How to work on Javascript projects?

I am trying to write my own Javascript Framework something like jQuery.
I use Aptana Studio for designing websites. I was planning to create a web page and write the Javascript code just as we would do for a website. Then I noticed that Aptana Studio also has a Javascript Project. So I created a new Javascript Project. But it primarily allows you to create only .js files and no HTML files. I wonder what a standalone .js file would do? Would't I need an HTML file to execute and test my Javascript code?
Certainly there must be some advantage to using the Javascript Project. But I am not able to figure it out. Can someone please explain how to use the Javascript Project?

I don't know anything about Aptana Studio, but I'm guessing that you're intended to drive your JavaScript project from another project. Think of the JavaScript project like a self-contained library. It doesn't make sense to include the test code in the library itself, because consumers of the library probably don't want to deal with it. Try creating a second project that imports your JavaScript project and allows you to play with it and test it.

I would recommend that you try Javascript-Test Driver. It has an IDE support and also it seems to be fairly good at helping you debug code. Find more details here:
http://code.google.com/p/js-test-driver/
I would say that while you DO need HTML files; you'd probably wanna do more according to the testing framework you choose; as some work with fixtures other loads up iframe and stuff. But I would presume that writing a whole framework would take more than just HTML pages and a unit testing framework would be more apt for the req.
Screw Unit for JS
http://github.com/nkallen/screw-unit
I know I have deviated from your question; but I just felt that rather than right project structure and HTML for testing what would be more important is a testing framework that keeps development agile and fast.
But that's just me.