I would like to optimize the loading time of my website which is built on Chaplin + brunch (coffeescript).
How could I pack everything so that only one js file would be seen / loaded by the browser ?
It is mainly a workflow question, I don't know if this can be achieved by brunch itself or if I should rely on an external package such as webpack or even jspm.
That does it: config.files.javascripts.joinTo = 'app.js'
http://brunch.io/docs/config#-files-
Related
I'm thinking about developing an Excel add-in as described here.
Would that be possible with Svelte - and do you know of any guides/help if yes?
I have looked through the video here, and I'm about worried about the usage of webpack.
Well... let's break it down
Is it possible?
Short answer: yes
Long answer: the documentation clearly states that Excel add-in still uses jQuery for logic manipulations. If your question was about Angular or react it would probably be a hard NO since those frameworks use an engine that should be included as part of solution. This kind of dependencies when dealing with plugins development are pretty hard to implement and maintain as a function of time so it's better to use very lightweight, non-core dependencies instead. Since you are asking about svelte - it is "compiled" into a bundle that contains pure code (based on your app logic). So - as long as your app rely on the load event sequence described in the docs - you are good to go.
Do you really need Webpack?
Short answer: no
Long answer: svelte can be deployed using rollup instead - which is more suitable for micro-applications (such as yours). So, if you feel that webpack (somehow) is blocking your work pipeline - just use svelete default configuration with rollup and you are ready to go
Your workflow
Create a very simple svelte app (my suggestion - try to take the example in the docs and implement it using svelte)
Test it locally (just verify it works)
Build it (you should ended up with 3 files - 1 html file in public directory and 2 other files in public/build directory - 1 js file and 1 css file (both called bundle)
Here's the tricky part - the html file does nothing - just loading the css and js files. In your case - you don't really need it
Change the bundle.css file to Home.css file
Change the bundle.js file to Home.js file and put your app inside the add-in main function
'use strict';
(function () {
Office.onReady(function() {
// Office is ready
YOUR SVELTE APP CODE SHOULD BE PLACED HERE
});
})();
Pack your add-in and test it
Technical notes
If Excel blocks the creation of new elements (using dynamic injection) - this approach will NOT work (since your entire app is generated by your js file)
Please refer to this article for more information about packing your app
Try to make your app as lightweight and small-size as possible just to avoid the risk of exceeding the limits allowed for add-ins
I have an example project running on nodejs server (https://github.com/bbc/talexample), how to compile it into index.html, css and js to test in WebOS simulator?
As far I remember TAL framework serves the content on the fly depends of the client UA. You can check some of the TAL core modules like tal-page-strategies and config/devices.
Based on these configs the framework sets the Doctype, meta and other parts of the HTML files in order to build the correct app (HTML5, CE-HTML...for Smart TV , HbbTV, videoconsoles...)
You can try to extract the js, CSS, create the html..., but you will need to merge lot of code
I am trying to use Inferno to render on the server. The documentation inferno-server and server-side-rendering does not say show to set-up babel & run the sever.
All I could find is InfernoJS Babel Plugin but noting about running it on Node.
Any help would be appreciated.
Could you explain what you mean by "Running on node"?
Inferno Babel plugin converts the JSX code into a regular JS code, which runs without problems on node (the server uses renderToString). While you are not using browser elements (document and other tools), everything should be fine.
Then you need to make a separate component for the client, which when requested will be given as a bundle along with the html page, and then using hydrate function to "cling" into webpage and bind items.
you can check my repository (although this is for TypeScript): https://github.com/MrFoxPro/inferno-isomorphic-tempalte
anybody knows how to check if a js/css file is already included with typoscript?
Example
[Template_A.ts]
page.includeJS {
jsfile = fileadmin/Template/js/jquery-1.10.2.min.js
}
now if i got an extension with the same include e.g.
[Extension_A.ts]
page.includeJS {
jsfile = fileadmin/Template/js/jquery-1.10.2.min.js
}
Is there a way to prevent this kind of double code injection? Maybe i got another Template e.g. Template_B.ts where jquery is not included - than the Extension_A.ts has to include jquery by itself.
Kinldy
You can use the same key inside includeJS such it just gets overridden if you include the file twice.
Other than that you should put jQuery into includeJSlibs, such that it is loaded before the other JS files.
Other than that, the TS should be unique for each page. Therefore you always to make sure anyway that all resources are included in-order.
You should not include JS libs with the automatic extension TS setups. Use your documentation to tell the integrator what needs to be included and what not.
The various and independent inclusion of scripts by plugins and templates is one of the tricky points in TYPO3. As far as I know, this point cannot be managed at one single point.
There is a plugin "t3jquery" that offers to build, compress and share a common jQuery library. It also has a service to analyze other plugins for their dependencies. But this doesn't solve the problem in general, as many plugins don't check for libraries already loaded.
The most stable way is to remove all plugin's references to libraries manually in your TypoSkript. This gives you some simple additional TypoSkript lines. I use lines like these:
plugin.tx_imagecycle_pi1.file.jQueryLibrary >
plugin.tx_imagecycle_pi1.jQueryLibrary >
plugin.tx_multicontent_pi1.file.jQueryLibrary >
plugin.tx_multicontent_pi1.jQueryLibrary >
# Fluid
page.headerData.998 >
You can find the matching TypoSkript descriptors by searching for the library name in the TypoSkript browser or by greping in the plugin's source code. You will also need this if you wish to add libraries as part of content that was get by AJAX, thus separating the libs from the page content.
Here's a tut (in German): http://jweiland.net/typo3/typoscript/javascript-manuell-entfernen-oder-einbinden.html
Futher possibilities you can check:
Some plugins are written in good structure and offer to keep back their Javascript in the settings.
Some script inclusions may come rather from the static template but from a plugin, so don't forget to have a look there.
In SAPUI5 I can load local files this way:
jQuery.sap.require("util.someFile");
But is it possible to load external libraries when required in some view using the above command or a similar approach? Ideally, I am looking for something like:
theLoadingCommand("some_url");
Thanks
Basically it is possible to register a module path to some URL.
jQuery.sap.registerModulePath('external.library', 'http://....'); //not working
There is only one problem with that. UI5 loads the resources via AJAX requests. Your browser will give you an error because you are trying to load files from a different host.
You can include external libraries by including the file in a normal script tag. It is also possible to include requireJS in your project and use its features. Unfortunately, at the moment UI5 doesn't support requireJS out of the box.
jQuery is supported by SAPUI5, so you can extend your heading from controller, for example:
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://somedomain.com/somescript";
$("head").append(s);