Develop Reference

Choosing framework with needed level of flexibility

I am trying to select framework, which replace our old framework
( middle-sized project )
Our previous project was written with angularJS, so our team write core of this application and distribute it to our clients, some of them has their own frontend teams and they can easily customize core components/controllers via $templateCache mechanism
like so:
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateId.html', 'This is the content of the template');
});
so these "outsource teams" can fully redefine components ( i mean not only css but layout too )
and include their "custom" components via custom.js files
I am looking for information how we can do same thing.
It looks like using React render props is not suitable for us, because we must have ability to replace any component in runtume just add *.js file
but i'm pretty new in Angular2+ and Vue did these frameworks has such mechanisms?

Vue.js has a pretty well-structured way for components. You can have the html, css and javascript all managed in one place. For basic examples, see the official documentation at vuejs.org
Once having written the components, it's kind of intuitive to use and reuse them in our main html file.
Feel free to try it out!
Also, vue is a modular framework, meaning you don't have to use it's own routing system etc. for getting started with it's template engine. It could even run along side other frameworks.

How to port an AngularJS UI component library to latest Angular?

I've been working on a personal project for many years. This isn't for work and there is no money to be made. So I take my time doing the development on the project, and that means I'm still using AngularJS as my front-end UI library.
AngularJS is my "component" library where all the directives, components and services are there to "bootstrap" existing HTML from the web server. The back-end is handled with CakePHP which renders all the HTML.
There is no massive single-page app and there is no AngularJS routing. I load my UI library on each page request, and that's how I'd like to keep doing it.
I spend my day job working with Angular 5. I'm very good at it and I'm the go to guy when other developers have Angular questions.
Despite these skills I've been unable to figure out a migration path for my UI library from AngularJS to the latest Angular. Angular 2+ has been out for a couple of years and I'm still stuck with AngularJS.
Here is an example of my problem:
Take a look at the Material Angular project built with Angular 4. It's basically the same kind of library as my own UI library. It contains a collection of directives and components that you can use.
If you have a web server that responds with existing HTML and you want to use Material Angular as your UI library, then you can't. Let's take the autocomplete component as an example.
The documentation explains how to use autocomplete:
https://material.angular.io/components/autocomplete/overview
There is also a working example of the component:
https://stackblitz.com/angular/ggmpnaqqqxk
In the documentation it shows that you can use the component like this:
<mat-autocomplete>
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
But when you look at the working example you see the problem that I have. In their example, they have to bootstrap an entire Angular application container that is used to inject the Application HTML which has the autocomplete example.
They can't just use the <mat-autocomplete> component in an existing HTML page.
Now let's take a look at the exact same component done in AngularJS for the old Material Angular project.
It too has a component for autocomplete named <md-autocomplete> and the old version has basically the same features.
There is even a working example:
https://codepen.io/anon/pen/goLrpJ
It too bootstraps an AngularJS application, but it leaves the existing HTML intact. That allows you to use <md-autocomplete> directly in your existing HTML.
How do I create an Angular 5 application that can be used as a component library with existing HTML?

Angular Elements are supposed to address this problem in near future. As explained in detail in this write-up, they are able to provide self-bootstrapping, standalone custom elements.
Currently the issues remain unsolved that restrict the use of attributes and projected content on root component, this seriously narrows down the use of Angular components as custom elements in real-world scenarios.

Angular's 2 templateURL functionality on another javascript library

I am about the start working on a project which I want to avoid using Angular 2 as it's still not out there and this project will be finished way before Angular2 will be released.
One thing I really like in Angular 2 is it's: templateURL , where you can import html templates at runtime very easily and works great.
After googling I've found Webpack or Browserify but not sure how good they are for this specific functionality I'm looking for.
Are their any other javascript libraries or released frameworks that have this same functionality, if so, what are my options?

You can do it yourself with those simple steps:
Get the html file as string in your code (using http get on the file).
Injecting the result into the DOM. (using innerHTML or some other method)
No framework needed.

How to include multiple content blocks in a layout template created by a standalone Meteor package

I want to create a Meteor package that provides a template for a grid layout where the user can resize and reorder the grid blocks by dragging them. This template provides the layout, but I want to be able to pass in arbitrary templates to get embedded inside the grid blocks.
I don't want the package providing the layout template to depend on any other packages or have any a priori knowledge or references to the content templates.
At first I was thinking I could use Template.dynamic and pass the template name to use for each grid block in the data for the layout template, but then I realized probably the layout template will say "template not found" because it probably can't access any templates outside of its package or dependencies (and of course I don't want it to depend on anything else).
UI.contentBlock is almost what I'm looking for, but the problem is that you can only pass one block of content into the template -- and I want to be able to pass in an arbitrary number of content blocks.
Now I'm thinking what I'll have to do is pass in the JS template objects as data for the layout template, and install them with Blaze.render() or something like that in the layout template's onRendered() hook. But that seems potentially fragile to me and I'd rather sacrifice code reuse and just define the layout template in my app namespace so it can access all content templates the app can access.
Does anyone have any other ideas how to solve this?
This is an exploratory question as I haven't actually started using Meteor yet -- I'm trying to identify what would be difficult in Meteor if I switch to it from React.

AngularJS - how to find uncompiled dom elements inserted by 3P javascript?

I have an AngularJS app combined with some legacy javascript that does DOM manipulation. The messy part - sometimes the legacy javascript inserts dom elements with AngularJS directives. Naturally AngularJS is not aware of this, and these directives are not compiled and linked to a scope. How to compile and link the directives on the new elements that are dynamically inserted?
Please don't tell me to re-write everything in angular, or wrap legacy stuff in angular, I can't touch that. My angularjs app is a plugin that runs on 3P websites to give extra functionality.
Options I have considered:
Just tear down the angular app and bootstrap it again each time - this is actually very difficult to do cleanly because there is no clean method to tear down the app: How to destroy an angularjs app?
Traverse the dom looking for uncompiled directives. I only have a handful of directives to look for (as attributes). Angular automatically places ng-scope class on elements where scopes are attached, so if this is missing I can compile the directive manually use the $compile service and link it to the scope.
At the moment I am working on the second method, but I keep thinking there must be a smarter way. Please does anyone have a better idea?
I should mention that my app receives a callback after any dom manipulation - but it would be better if I didn't need it.