Develop Reference

Angular and Micro-Frontends

I am doing some research on how to split a huge single-page-monolith into a micro-frontend architecture.
The idea:
the page consists of several components which would be running autonomously
each component is managed by one dev-team
each team can change, update and deploy their components without breaking components of other teams
each team chooses its own toolstack
The reason
To efficiently develop large applications you need to have many people working on it. However the number of developers per app/team does not scale well. Parallel development of multiple independent apps by independent teams however can be scaled arbitrarily
With this in mind it is imperative that teams can choose their own toolstack and especially perform independent version-upgrades of third party-libraries (like angular, react, jquery). If this was not the case a framework-update would need to be compatible with every single component before you could deploy it to production.
Does this work with Angular?
While independent version-upgrades are necessary, it would be reasonable to restrict the teams to a few supported frameworks (Angular, React, Vue, Polymer...) and for now I try to build a demo purely consisting of Angular-Apps.
However even though Angular 5 is supposedly a platform-framework which supports huge multi-module apps, it seems to be almost impossible to have several independent angular-apps running in the same browser window.
I managed to bootstrap several Angular-Apps (different versions, each hosted on its own server) on a single webapp by utilizing HTML-Imports. However there are several global dependencies which need to be shared between apps
zone.js can only be started once
routing requires url-changes
Browser-stuff like cookies, sessionstorage, etc...
There are several articles in the net on how to bootstrap multiple angular-modules but they all refer to multiple modules in the same core-app, which in turn means they all are running on the same framework-version and an update means you have to rebuild and deploy the whole monolith.
Is there any solution other than "iframes" to get multiple Angular (5) Apps running on the same Page?

Instead of outright suggesting AGAINST this idea mainly due to separate stack requirements I will lay out the trade offs and provide some restrictions which will make this possible.
the page consists of several components which would be running autonomously
We all know this is offered out of box in Angular components with clear demarcation of inputs and output.
Small CAVEAT: When/If you pass objects for #Input and emit event objects with #Output() interacting components must agree on a defined interface upfront.
Workaround: Create another TypeScript project which just defines these artifacts. All other "component projects" would depend on a specific version of this.
each component is managed by one dev-team
Dev Teams can distribute the components just like other Angular projects in the opensource are doing. They can publish their artifacts to some npm repository. To develop attributable components I recommend you refer to Angular Material2 which may be overwhelming or you may use something like ngx-library-builder (based on Angular Team Member filipesilva/angular-quickstart-lib ) that each component team uses.
CAVEAT: Till this date angular team does not have a quick component library sharing project setup as evident in Angular CLI. But numerous developers have created some sort of library builders to fill the gap in Angular CLI.
each team can change, update and deploy their components without breaking components of other teams
Have your main project pull all the components and perform a periodic/change triggered build/deploy on some CI server. This is essentially producing AOT production builds with all the latest component releases.
As an added bonus you can have some abstract e2e tests built to do some automated integration testing ensuring side effects of one component does not break other components.
CAVEAT: It will be difficult to govern how each team develops the components i.e. they are doing optimal usage and disposition of memory, CPU, and other resources. e.g. what if one team starts creating subscriptions and does not remove them. Using some static code analysis can be useful but you will not have this source code available at this time - unless they also publish their source code.
each team chooses its own toolstack
This is a complete deal breaker unless if you mean "toolstack" as in developer tools such as IDEs and some of the "devDependencies". Although certain parts of "devDependencies" of each team must have the same exact versions of angular dev kits such as compilers etc.
At the least each team must use same Angular, RxJS etc.
Most importantly care should be taken that each of the team does not bootstrap any components - only the main projects will have a bootstrap module and that will bootstrap the root component. This will help answer your zone.js issue
Does this work with Angular?
If you recognize the limitations and provide governance I suggest go for it.

We asked ourselves the same question. Unfortunately, it seems that the answer to the question
Is there any solution other than "iframes" to get multiple Angular (5) Apps running on the same Page (edit: where each Angular app can use a different Angular version)?
currently is
No, unfortunately not, as long as you want to use Angular‘s change detection (which uses zone.js).
Due to zone.js Angular pollutes the global scope. Even worse zone.js patches an awful lot of browser APIs (https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md) to detect when a zone is completed.
It’s only possible to use different versions of a framework in one page without side effects if the framework does not touch global scope (this seems to be true for React und Vue). Then you can bundle different framework versions with each application via Webpack (with separated scope and the downside that the size of each application bundle increases).
So, if you want to build a web page with Angular where different applications/modules should be integrated on one page, the only feasible solution currently is to create a deployment monolith (e.g. bundle different modules from different teams in one Angular application by a CI/CD system as bhantol explained in his answer).
It seems that the Angular team is also aware of the problem and that they might tackle it with following major versions. See robwormwald’s answer on the following Github issue regarding the Angular Elements roadmap: https://github.com/angular/angular/issues/20891
Hopefully there will be more information by the Angular team on that topic when the next major version Angular 6 is release at the end of march.

It seems that there has been a solution for your needs for a while now. Take a look at Single-SPA project HERE.
It's a wrapper SPA project for your micro SPA projects.

Take a look at Angular Elements (Custom Elements). https://moduscreate.com/blog/angular-elements-ngcomponents-everywhere/
The new Ionic version (4) is totally based on it to be able to be used on every version of Angular and on every JS frameworks.
For that, they created https://stenciljs.com/ that will help you to create Custom Elements.
But if all teams are using Angular, each of them can create a library using ngm for example.

Yes you can.
However you don't really want to get stuck in a framework when you are writing web components, because the whole point of a web component is to be reused possibly anywhere.
I share your vision, it's definitely better for the quality of the software as well as the productivity of developers to work on focused features rather than large apps when it comes to implementation.
Finally, what you are looking for right now is not Angular, but StencilJS. Stencil is a compiler for web components who also generate a virtual DOM inside your component to improve it's UI performances. Check it out ;-)

Other than Iframe there is one more option is currently available is SPA framework, you can get the sample code from here
https://github.com/PlaceMe-SAS/single-spa-angular-cli-examples
https://github.com/joeldenning/simple-single-spa-webpack-example

The only way to integrate different Angular Apps apart from IFrames and communication via postMessage is by "Deep-Linking" them and exchanging information using URL-Parameter. All Angular apps are then located on their own browser tab. But for common services and components you may want to implement a "Shared Kernel" used by all of your Angular apps, therefore your a stuck on a certain Angular version range. When you want this shared kernel the NGModule approach is the recommended way to go. You can mix Angular 2 and Angular 5 versions in one app because they are backward compatible. There ist no urgent need for the teams to stuck on the same version, until the Angular Team introduces breaking changes. Despite of that your technical debts grow, when you are not updating. The frequency for technical-updates is definitly higher in the Angular/Javascript area.

Laravel and Angular(JS), where to start with Angular?

I'm a software engineer and want to learn developing web applications with PHP and JavaScript. I'm familliar with C#, object oriented programming and working with frameworks.
So i decided to learn directly creating an web application based on a framework (Laravel, as we work with this framework on my work also). I start understanding how the framework works and as programming is not new for me i also understand the basics of PHP.
For the front-end i want to use Angular JS as i heard a lot of positive things about it. During my research on Google about Angular and Angular in combination with Laravel i read that we already have Angular V2 and V4.
I have a few questions about this:
What is the best version to start with? This because i heared the
good things about V1 (and the combi with Laravel), but V2 and V4 has
a complete other concept? I'm a bit confused if it has the same
purpose and if it is still a good approach to combine the newer
versions with Laravel?
I can find how to combine Laravel with AngularJS(1) and how to structure the project, but cant find a good tutorial or explaination how to combine/structure Laravel with
Angular 2 or 4. This also confuses me.... Are the newer versions not
a good combination with Laravel anymore?, Angular just uses Json
API's so why not? or are i'm wrong.
What i found about Laravel and the newer Angular versions is that it is a no-go to use both in 1 project. The advice is to use 2
different projects? I do not understand why as i can still make them
independed from eachtoher in 1 project by a nice folder structure.
So if this is true, what is the reason behind?
If it is no problem to combine both in 1 project, i prefer to do this. But what is the best practice to add Angular into the Laravel project? especially for the folder structure? Is there a tutorial which describes how to use these 2 frameworks in 1 project?
I hope that someone can give me a "kickstart" how to start with increasing my skills.

I would suggest using Vue.js instead if you are familiar with new Laravel 5.x. It is supported by default and plays together pretty good.
https://learninglaravel.net/topics/vuejs
In my previous projects I used Laravel 3/4 + Backbone.js. Backbone, to me, is much better then diving into a full framework that your entire structure ( html + js ) depends on multiple custom tags etc. Backbone gives you a better approach on that case that you can use it partially in some modules etc or you can build your entire layout with it.

why dojo 2 doesn't take an already created framework as base?

why dojo2 doesn't take an already created framework as base. For example they could use angular2 as base and then only create the widgets.
why they want to create everything from scratch? Is there any advantage on doing that?

Angular and Dojo are two different things.
Dojo is a JavaScript toolkit. Provides everything you need to build a Web app. From widgets, utilities, pub/sub, aol programming even a build tool and much more.
AngularJS is a specialized structural framework for dynamic web apps.
The advantage of dojo is that cover majority of aspects needed for a complex Web app with a standard API.
If you would use instead several combination of frameworks, would be more difficult to achieve such uniformity.
Interestingly Dojo2 now use an external library for virtual dom called maquettejs for its widget system, but I believe it is a special case otherwise dojo itself is quite comprehensive toolkit.

Hm, apart from dojo's modularity and different goal :
dojo appeared in 2005 (history)
and angular appeared in 2009
Note that dojo2 is beta.
They could use angular (but why a new isolated product) or polymer (but not serverside) or react (but not typescripted) but why should they change the philosophy behind the widget system at all. They recently decided to support TSX which is a react like syntax.

Is Google's Polymer a fully functioning Frontend Framework to Subsitute OR Complement other Frontend Frameworks?

The question is in regard to AngularJS, BackboneJS, EmberJS and the other frameworks.
I have to translate a project from php to javascript and I have to decide, if I am going to use:
AngularJS
Polymer
A combination of them
I prefer using Polymer, because I like it.
Yet, I am missing (and correct me where I am wrong) the ability to make:
Views and link between them (like in Angualar)
Controllers
I know that the structure is up to me, on how to build my application, but it seems that angularjs has a well predefined structure for building mvc-applications.
Therefore I want to know: Is Polymer a substitute for Angular, if you want to build a well structured web application or is Polymer complementary library to be used along other existing frameworks?
EDIT 21.09.2014
No one really answered the question to my fullest satisfaction, therefore I marked it as not answered yet. Many say it just "DEPENDS". But no one is able to elaborate, on what exactly it depends.
On the complexity of the application? On the needs of the application? For what needs does Polymer fit and for which doesn't it fit? These are the answers I was looking for.
Some say it can be used as a frontend framework. Others say that is just a library and others say "Yes and No". Unfortunately rather confusing answers.
I wish there was an official answer to this, but I let you in on what my feeling is. I believe it is a substitute, but Polymer hasn't yet reached the structure, that other frameworks require to work. Maybe this is intentional, maybe it is just a matter of unreached maturity, because the framework is new.
I hope that the creators will explain, when it is best to use AngularJS and when should someone use Polymer for building large scalable web applications.
EDIT 15.08.2015
Polymer 1.0 is out. And it turns out Polymer is officially NOT a framework and is supposed to work in a complentary way with other frontend frameworks.
https://youtu.be/fD2As5RmM8Q?t=6m42s

IMHO both are two different things and they both are to serve two different purposes. Though they have some common features to offer, data-binding can be one of them.
Polymer
If you truly want to use the Awesome Webcomponents, Polymer is one way to achieve that. There are other options like you can go with your vanilla JS, or use other libraries like X-Tag from Mozilla or Bosonic. These libraries polyfill the webcomponent features which are still in drafted state. So, these libs help us have/provide the same user experience across browsers even where there is no native support for the webcomponents.
Angular
This is a full fledged MVC framework. And people here know what Angular as an MVC framework includes/provides.
That all said to answer your question
Google's Polymer is not exactly a fully functioning Frontend Framework and can be used as a Subsitute OR Complement to other Frontend Frameworks. It can be used as a substitution for the V part in Angular as MVC. Like people use React as V in different frameworks. It is not much a different case for me. Being more specific in case of Angular, Polymer is like directives in Angular 1.x while like components in upcoming Angular 2.x.
References
To be more sure of what I am talking about and for additional sources on how to use the Polymer with Angular2 (Angular2 not released to this date)
you can check this video at "https://youtu.be/7WgEuNZCCHk?t=32m15s" starting from time 32:15 where Rob explains how to use the generic webcomponents/polymer as the components/View in the Angular2.
you can check this project "https://github.com/rkirov/youtube-app" which uses Angular2 and google-youtube web component.
https://github.com/ebidel/polymer-experiments/tree/master/polymer-and-angular/together
From the polymer-starter-kit
Framework-free, or framework-compatible
Build your app out of elements, or wire in an external framework to handle business logic. It's up to you!
So, in my view these two projects are not competing each other.
Webcomponent Specs
The webcomponent specs are here for one's reference
Custom Elements - http://w3c.github.io/webcomponents/spec/custom/
HTML Imports - http://w3c.github.io/webcomponents/spec/imports/
Shadow DOM - http://w3c.github.io/webcomponents/spec/shadow/
I just wish the webcomponents are native to the evergreen browsers ASAP.

From the Polymer Starter Kit:
"Framework-free, or framework-compatible
Build your app out of elements, or wire in an external framework to handle business logic. It's up to you!"
Update:
What was described as Carbon Elements seems to fall under:
Polymer(version 2) App Toolbox
Component-based architecture using Polymer and web components.
Responsive design using the app layout components.
Modular routing using the elements.
Localization with <app-localize-behavior>.
Turnkey support for local storage with app storage elements.
Offline caching as a progressive enhancement, using service workers.
Build tooling to support serving your app multiple ways: unbundled for delivery over HTTP/2 with server push, and bundled for delivery over HTTP/1.
Carbon Elements adding framework features
During The Polymer Summit 2015 Keynote, Google announced a new "Polymer idiomatic and framework oriented" set of elements, tentatively named the Carbon elements.
Some quotes from the longer tjsavage answer regarding Angular 2 vs Polymer Carbon:
"The trick is in thinking about the web platform as an application framework... Polymer the library is to the web components component model as the carbon elements will be to using the web platform itself as an application framework: the opinionated rails to make it easier to understand and achieve."
"Angular 2 will provide one way of structuring your application that uses Angular's view of what makes a good application structure. The carbon elements will provide a different way of structuring your application that more directly uses what the web platform itself provides as its structural underpinning."

Polymer is almost fully functional.
Currently it is missing routing for example but this doesn't mean you can't do this with Polymer.
There is now https://elements.polymer-project.org/elements/app-route
In Dart also dependency injection works fine with Polymer because of the types. If it's possible in Dart, it's possible in JS as well because Dart transpiles to JS. DI in plain JS might be more cumbersome though.
In this package (Dart)
https://github.com/bwu-dart/bwu_polymer_routing
I made the routing and DI packages used by Angular.dart available for Polymer. There are also routing packages for Polymer.js available.

I put together some router demos. The "missing parts" really depend on what type of application you're building.
https://github.com/erikringsmuth/polymer-router-demos

I've used it as both, as an enhancement to an app written in another framework, and as the full framework itself, where it was responsible for every element on the page.
I really like just about everything about Polymer, so I've been very happy using it for the whole app, even built my own router. If you've got an existing app I'd recommend dipping your toe in the water, as Polymer works great composed into other apps to see if it's to your liking.

Let me give this another try:
The key behind web-components (and thus Polymer) is, that they are self-contained. You have a web-component somewhere, you import it, and (if you're lucky) it just works, wherever it comes from. The web-component will NOT interfere other components. So doing things like MVC is not Polymers business (although it provides a data-binding mechanism), as this belongs to the process of tying things together. It is considered to be best practice that these kind of things are solved by creating new elements too, that create and react to events. When it comes to the model you code non-visual web-components, that don't have/need a template. TodoMVC has an (outdated) example for that (https://github.com/tastejs/todomvc/tree/gh-pages/examples/polymer).
So Angular gives you a path to follow on how to do MVVM, whereas it is up to you on how to do the "logic" in your app when using Polymer. IMHO Angular is for more complex and rather enclosed apps, whereas Polymer is for any kind of app, that embraces the web. You even can use Polymer, if you're not writing an app at all ;)

Getting Started with Durandal

I'm interested in building a SPA application. From what I can tell, Durandal provides the majority of what I'm looking for. Except, I'm looking for the most basic possible example that uses durandal. The sample app that's included uses bootstrap and sammy.
Is Bootstrap and Sammy required? If not, is there a sample I can see somewhere that doesn't have the code? I just want a basic app with two screens to use as an example. Yet, I can't seem to find the bare minimum example anywhere.
Thank you,

Version 1.20 of Durandal uses Sammy.js for routing if you include the optional router plugin. It is not necessary, but a pretty good idea to use it to simplify learning Durandal without having to learn how to route.
Durandal 2.0 is scheduled for release this month that gets rid of Sammy.js's dependency and has it's own router.
To find an example or sample app using Durandal that doesn't rely on either Sammy.js or Bootstrap will be difficult because they are easy to include, everyone understands them, and it's hard to go wrong when using these to simplify a sample app.
If you are looking for a very simple sample you can look up John Papa's CodeCamper JumpStart, but it includes a lot of other dependencies. The Durandal Starter Kit however is available on nuget and from durandaljs.com and has a single view and is an excellent way to start learning Durandal.js.