I would like to know if it is possible to nest/tunnel javascript rendered sites.
What I mean concrete:
I got a site bugs.example.org which serves a bug tracker application built on Backbone Routers, Views and Models.
over bugs.example.org/#/mybugs we can list all our bugs.
Now I have for example a second project worksuite.example.org.
This project serves roadmaps, presentations, etc. unfortunately this worksuite app doesn't serve an independent bug tracker. Instead it has a joint venture with bugs.example.org.
Now worksuite.example.org want to include/nest the bugtracker views in its own application.
This could look like:
worksuite client calls worksuite.example.org/#/bugs now the worksuite app calls a GET to bugs.example.org/#/mybugs and does a $el.html(requestedContent).
Does this work?
Another application which could work similar, which I know is the google captcha service which you nest with some js
Is there a keyword for such behavior?
Depending on how well the backbone app is architected, you can have worksuite.example.org just pull all of bugs.example.org's JS files, but use its own base html/css:
<!-- on bugs.example.org -->
<script src="mybackbonestuff.js"></script>
<link href="mycss.css"></link>
<!-- on worksuite.example.org -->
<script src="http://bugs.example.org/mybackbonestuff.js"></script>
<link href="worksuite.css"></link>
Related
I've a Backbone application, which initialises from index.html. I tried adding new amp html called index.amp.html and followed instructions in Create Your AMP HTML Page.
My index.html has only hook to require js to start loading backbone app. All the html is generated dynamically.
Is there a way I can include AMP practices in dynamic generated HTML? Because all I have is one index.html entire content is generated through handlebars dynamically on client side.
I didn't find any good article to make SPAs to support AMP. Are there any best practices to follow? Please help me out.
At this time, the only JavaScripts that can be triggered in an AMP document are these two scripts:
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
You can use a mustache template as part of the custom-element script as follows:
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
The templates are described here:
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-templates.md
Without access to your code, can't say how easy or difficult it may be to modify your handlebar templates to fit the model above.
I have an ionic app. I can the goggle maps api in the index.html using
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=key&sensor=true&language=en&libraries=places"></script>
However my app has 2 languages which I translate using angular translate.
When the app is translated, the map and the geocoder doesn't change language. So I tried to add another
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=key&sensor=true&language=ch&libraries=places"></script>
in index.html
But seems like it only takes one. How can I solve this?
AFAIK the Geocoder uses the browser's preferred language, or language specified when loading the API (see https://developers.google.com/maps/documentation/javascript/basics?csw=1#Localization).
I don't think you can load two times the API with two different languages specified. Instead you can try to load the API only when your local language is set (only one at a time).
I have an AngularJS app (myApp) currently used only by my own ASP.NET MVC app. The AngularJS is working well in my app. Now other MVC apps also want this as an add-on (plugin). Is this possible to do without modifying my original AngularJS app, and been too intrusive to other apps?
I thought is like this:
distribute the myApp.js to an in-house CDN to be included the BundleConfig.cs by other apps
add a <DIV data-ng-app="myApp"> in pages of other apps so that my original AngularJS can be injected.
Far too many unknowns about how your app is configured for a precise answer but any module can be dependency injected into another module.
For simplicity sake assume that you have all the templates needed to run your app converted to javascript strings and use $templateCache() to register them and all the code for your app is in one file then anyone would be able to inject your module into theirs and use whatever components you have available.
All they would need would be a script tag that points at location for your app file ... and that location could be any server, cdn or local download directory
I am developing an application using ExtJS where all related ExtJS file I have to keep in individual web app to be referred.
I want it to configure in JBOSS 6.1 as a module and then referred by any web app in my local.
Is there any way to achieve this.
thanks,
The best way to go would be to follow the "production process" that Sencha defined where you put into a single .js file all your defined classes plus the classes of the framework you are actually using. This is way faster.
http://www.sencha.com/forum/showthread.php?230650-How-to-package-(minify)-an-extjs-4-application
Although if you really want accessible the full framework for some(stubborn manager :P) reason. You can always create a simple Web application with ExtJs inside of it and refer to the classes from other web applications ...
ExtJs.war --> contains the full framework and nothing else
MyCoolEnterpriseApp --> in the html refers to
<script type="text/javascript" src="/ExtJs/extjs-4.2.1/ext-all-debug.js"></script>
I have a single page AngularJS app and I want the initial page render to contain all relevant info as HTML so it is crawlable with JavaScript disabled.
For simplicity I was thinking of just adding an alternative HTML version which is hidden when the Angular app loads.
<div>
<!-- Static page content for crawlers, hidden when Angular app loads -->
</div>
<!-- Angular app -->
What are the drawbacks to this approach (serving a complete pre-rendered copy)? The angular app draws data from a JavaScript object rendered as part of the page and I am happy to live with the data being sent twice.
Google have defined a specification that lets you serve snapshots of your page's HTML after all necessary Javascript has run to search engines.
This is supported by Google, Bing, Yandex and even some social network bots: Here are the details of who supports it: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html
Implementing this youself is a fair bit of work, so several companies including https://ajaxsnapshots.com (who I work for) provide it as a service that you can plug into your web server without making any changes to your app.
A search engine bot doesn't really care whether the content is hidden/ visible.
The search engine bot would crawl through almost the entire content of the page.
Therefore its highly recommended to have only the relevant content in place.