Is it possible to use Application Insights with Angular JS 1.5.x?
The snippet from this page seems to require a static key, but we need to specify this at run time, per environment:
<script type="text/javascript">
var sdkInstance="appInsightsSDK";window[sdkInstance]="appInsights";var aiName=window[sdkInstance],aisdk=window[aiName]||function(e){function n(e){i[e]=function(){var n=arguments;i.queue.push(function(){i[e].apply(i,n)})}}var i={config:e};i.initialize=!0;var a=document,t=window;setTimeout(function(){var n=a.createElement("script");n.src=e.url||"https://az416426.vo.msecnd.net/next/ai.2.min.js",a.getElementsByTagName("script")[0].parentNode.appendChild(n)});try{i.cookie=a.cookie}catch(e){}i.queue=[],i.version=2;for(var r=["Event","PageView","Exception","Trace","DependencyData","Metric","PageViewPerformance"];r.length;)n("track"+r.pop());n("startTrackPage"),n("stopTrackPage");var o="Track"+r[0];if(n("start"+o),n("stop"+o),!(!0===e.disableExceptionTracking||e.extensionConfig&&e.extensionConfig.ApplicationInsightsAnalytics&&!0===e.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)){n("_"+(r="onerror"));var s=t[r];t[r]=function(e,n,a,t,o){var c=s&&s(e,n,a,t,o);return!0!==c&&i["_"+r]({message:e,url:n,lineNumber:a,columnNumber:t,error:o}),c},e.autoExceptionInstrumented=!0}return i}
(
{instrumentationKey:"INSTRUMENTATION_KEY"}
);
window[aiName]=aisdk,aisdk.queue&&0===aisdk.queue.length&&aisdk.trackPageView({});
</script>
Articles like this one seem useful (unless you're familiar with TypeScript) and we're not using TS, so porting is a problem.
Related
I'm going for a pre-parsed ractiveJS templates system and I'm wondering if it's worth the work.
As far as I've seen templates don't get parsed until it's actually rendered, which is smart, but I guess if it's a big template, I'll get bigger parse times, so, how can I track that ? Or if it's not work tracking, is it a performance improvement to send them already parsed ?
Asking because I'm on NodeJS now and it's quite easy to use gulp and parse them when server starts.
You can parse templates manually with Ractive.parse(template):
var start = window.performance.now();
var parsed = Ractive.parse( `
<h1>Hello {{name}}!</h1>
<p>We're using Ractive.js version {{version}}. This template was parsed in {{time.toFixed(2)}}ms</p>
` );
var time = window.performance.now() - start;
var ractive = new Ractive({
el: 'main',
template: parsed,
data: {
name: 'world',
version: Ractive.VERSION,
time: time
}
});
<script src='http://cdn.ractivejs.org/edge/ractive.js'></script>
<main></main>
Parsed templates are a little bit larger than unparsed templates (typically around 30-40% larger), so it's a trade-off – less work, more bytes. FWIW I always pre-parse my templates.
I am working on a website with React.js and asp.net mvc 4, I am planning to use Flux as my front-end architecture, but I met some problems and was very confused about the use of Flux:
In the beginning,I thought Flux would be a perfect front-end architecture in my website,but after I read a lot of articles about Flux, I find that they are nearly all with NodeJs,even the demos from facebook team,that means they all do the rendering stuffs of React.js/Flux code in server side,right? but How can I use Flux in the client side ,I mean in the user's browser?
I am very confused,am I wrong if I treat react.js/flux as a client side solution?If I am not wrong, but why they all use them with NodeJs and ES6(like facebook Dispatcher.js), That's ok in server side,but what about client side ? most of user broswers don't support ES6. I tried using Babel to convert Dispatcher.js from ES6 to ES5,but the es5 version had some errors and didn't work.
And I also found some implements of Flux that claim to support client side,like fluxxor,but I don't have a chance to try it before I write this post,because I am too confused.
I hope someone can help me to figure out these problems.
ps. Sorry for my english,if you don't understand my words,pls let me know , I will explain it.
I think you want :
$ bower install flux
Then you could do something like this (if using require.js):
require(
['bower_components/flux/dist/Flux'],
function(
Flux )
{
var dispatcher = new Flux.Dispatcher();
dispatcher.register(function(payload) {
if (payload.actionType='test') {
console.log('i got a ', payload);
}
});
dispatcher.dispatch({
actionType: 'test',
otherData: { foo: 'bar' }
});
});
(This answer uses : https://bower.io/, https://libraries.io/bower/flux, http://requirejs.org/)
React is a client side library. You can serve a React App with virtual any backend language. The reason a lot of examples are with node is because it is easy and fast to set up.
You should try this tutorial:
https://facebook.github.io/react/docs/getting-started.html
It is pretty straight forward and doesn't require node.
Also maybe you should try starting to serve the React app statically at the beginning to better understand React itself.
ES6 works in Browsers thanks to Babel. If you believe you have any trouble with Babel, you might want to first play around with it's REPL to get a feeling for it: https://babeljs.io/repl/
The idea is that the code can run on the client and server (universal js, used to be called isomorphic javascript (though it goes a little further then that with serverside rendering etc..),
There are many flux implementations reflux is the most promising at this point , im using martyjs (but they stopped the development, it will be taken over by alt) but even for the flux architecture, u just get the dispatcher / event emitter and some ideas :D,
Shorty said u can install the npm packages (flux, react , babel) etc, but u need something like http://browserify.org/(with reactify) or Webpack, to run them in the browser. U don't need to run them on a node js "after its bundled", webpack/browserify will bundle the code so it can used within the browser independently
https://github.com/christianalfoni/flux-react-boilerplate/ <-- ther are some boilerplate, that provide some nice guide on how to bundle the code.
As we all know, Meteor's initial payload sent to the client comprises (in production) a concatenated javascript file containing the Meteor platform, packages, and all templates parsed into Meteor's reactive templating system. Server-side rendering, where the templates are rendered to HTML and sent to the client in the initial payload, is on its way but doesn't have an expected release date yet.
I'm looking for a way to "hack" or approximate server-side rendering given the available functionality in Meteor 0.8.x. Specifically, I want to:
enable the page to render its initial contents without first waiting for the several hundred KB Meteor platform javascript file to be downloaded and parsed.
alternatively, modify Meteor so it only sends the templates it needs to render the initial request in the javascript payload, and fetches the remaining templates once render is complete.
The use case is http://q42.com. I recognise Meteor isn't the best fit for static websites like this one but I want to try and see how far I can get anyway. Right now the Meteor platform JS file is over 600 KB in size (±200 KB gzipped) and I'd like to reduce this size if possible.
Note: I'm aware of and already using Arunoda's fast-render package, which is intended to send data with the initial payload. In this case I want to cut down on time-to-first-render by also getting the templates themselves down faster.
This is a little bit tricky. But there are some things you could do. This may not be the beeest way to do it but it could help you get started somehow.
Meteor is build with many packages as 'default', sometimes some are not needed. You can remove the standard-app-packages and add the packages (that you need and use manually) listed here: https://github.com/meteor/meteor/blob/devel/packages/standard-app-packages/package.js
To cut down the templates you would have to include the bare templates that you use and include the other template's separately and perhaps send down the Template information via a Collection, using a live observer handle to initiate the templates
You would have to 'render' the templates on the server side or store them manually in your collection using Spacebars.compile from the spacebars-compiler package which is a little tricky but you could have it done decently:
This should give you a rough idea, not sure how to get passed the 'eval' bit of it though:
HTML file in /private/template.html
<template name="test">
Hello {{name}}
</template>
JS file in /private/template.js
Template.test.name = function() { return "Bob" }
Server side code
var collection = new Meteor.Collection("templates");
var templateData = Assets.getText("template.html");
var templateJs = Assets.getText("template.js");
var compiled = Spacebars.compile(templateData).toString();
var jsData = templateJs;
collection.insert({templateName:"test", data: templateData, js: templateJs});
Client Side code
collection.find().observeChanges({
added: function(id, fields) {
var template = fields.data,
name = fields.name,
js = fields.js;
Template["name"] = UI.Component.extend({
kind: "name",
render: eval(template),
});
eval(js);
}
});
Then just subscribe to the collection asking for your template and it should exist. If you use iron-router I think (not sure) you could make the subscription wait before the template is rendered so you could have it work.
Again this is just a 'hacky' solution, one thing I personally don't like about it is the use of eval, but javascript needs to run somehow...
You could loop through files in a particular folder using fs = Npm.require('fs') to render each template too.
One alternative would be to inject a 'script' tag calling the compiled js template and template helpers to let the template exist.
I am trying to use Google Closure templates (Soy) with Google Closure.
I am including the soyutils_usegoog.js utilities file as instructed. This file provides a number of utilities used by the generated templates, notably soy.StringBuilder. Here's how it is creating it:
soy.StringBuilder = goog.string.StringBuffer;
The soyutils file requires goog.string.StringBuffer a few lines above, but when running in non-compiled mode this results in a runtime error because the JS file that StringBuffer resides in will not be loaded until after soyutils has executed.
Unless I am mistaken, JS files in Closure should not immediately access namespaces that they 'require'. The <script> tag is only added after the execution of the current script (in non-compiled mode) so immediate usage will result in a runtime error.
In short, how can I load in soyutils_usegoog.js without triggering a runtime error due to the early access of good.string.StringBuffer.
Are you recreating deps.js with your compiled templates as an input (and soyutils_usegoog.js)? And then are you goog.require-ing your template? Something like this should work:
<script src="/closure-library/closure/goog/base.js"></script>
<script src="/closure-library/closure/goog/deps.js"></script><!-- might not need this line if base.js is setup to auto include deps.js -->
<script>
goog.require('your.template');//this will pull in and execute all the dependencies (including StringBuffer) for your template
</script>
<script>
alert(your.template());
</script>
Perhaps the question has been asked on http://groups.google.com/group/closure-templates-discuss?
I am currently developing an ASP.NET web application and do most of my development on the road, i.e. offline. I plan to use Google/Microsoft/an-other CDN for JQuery and a couple of other script resources.
My question is, is there a straightforward way to develop with a link to a local file within the solution, but to point to the CDN upon deployment/release build?
Thank you in advance!
You could write a helper function:
public static string JQuerySource()
{
var config = WebConfigurationManager.OpenWebConfiguration("~");
var compilation = config.GetSection("system.web/compilation") as CompilationSection;
if (compilation == null || compilation.Debug)
{
// Running in Debug mode
return "/scripts/jquery.js";
}
// Running in Release mode
return "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
}
That you would use like this:
<script type="text/javascript" src="<%=JQuerySource() %>"></script>
You could just change the link before you deploy...?
Update:
A simple Replace All will suffice if you have a link everywhere.
I know these might be really dumb and simple solutions, but it seems to me that your problem is too simple to require an abstraction or extra code writing.
However, if you must, this is one way of doing it:
Create an XML file that holds values:
MyAppSettings.xml
<?xml version="1.0" encoding="utf-8" ?>
<MyAppSettings>
<JqueryLink
value="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
store1="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
store2="../jquery.min.js"
>
</JqueryLink>
</MyAppSettings>
And get the value from the XML file:
public static string GetJqueryUrl()
{
XElement file = XElement.Load(HttpContext.Current.Server.MapPath("~/App_Data/MyAppSettings.xml"));
string jquerylink = file.Element("JqueryLink").Attribute("value");
return jquerylink;
}
You could make a helper function for the previous code and use it all over your code.
Whenever you want to switch between deploy and offline links, just change the "value" parameter in the xml file.
You can keep the attributes "store1" and "store2" in there just so I wouldn't have to remember what they are when I do switch them.