I want to use onsen for a mobile web app. Most people seem to use it with phone gap/cordova so that the result can be installed as an app.
Am I going to have performance issues if I use it for a website?
The minified JS alone is 350kb and the css is almost 200kb. I suppose I can gzip it but I just want to make sure I'm not misusing the tool and doing something crazy.
Hmm actually
https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.15/js/onsenui.min.js - 85KB
https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.15/css/onsenui.css - 3.2KB
https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.15/css/onsen-css-components.css - 25KB
These are the only 3 files which you actually need to use Onsen UI.
If you want to use something like angular, react etc there are additional js files which you may need, but only if you want to use the frameworks.
And of course for the css - if you want to use some sort of icons either font awesome icons or something similar you would need to add those too, but if you're not using them you don't need to serve them.
As for performance issues
for loading you can concatenate the files to make less requests (you said you will be gzipping them so I guess you will probably also be doing this)
after everything is loaded I don't think you will be able to notice a difference between the app and the webpage.
I may be missing something, but I think this is pretty much it. Basically just include the things which you need - no need to include angular bindings if you're not using angular for example :D
Related
I recently started using SASS and right now I need Font Awesome for one of my project but I want to use it offline. I know that I could simply use CDN (as I did) but I just don't know how to use it offline so it's pretty annoying :D
Well, basically you just download the resources, add the .js/css-links to your .html and use the icons ;-)
It's all described on their website - but the choice of options (CSS or SVG) might make it look more difficult than it is...
JavaScript newbie here. I'm new to Angular2 and am currently learning about things like module-loaders (there's so many!), etc, so bear with me since my space of "unknown unknowns" is probably quite large.
I'm interested in creating a JavaScript based "Packaged Web App" for windows ("Packaged" in the sense that the JS is included in the Universal Windows Platform app).
One constraint to keep in mind is that I have severe limitations on the size of my packaged app. The smaller, the better.
With that in mind, I have a few specific questions that will hopefully expose the extent of my ignorance:
Without resorting to Electron or Ionic2, is it possible (also, is it a good idea) to create the offline experience in Angular2 and then only manually include the resulting transpiled .js files in my Visual Studio project?
How hard is it to manage the dependencies for these transpiled files? Are they entirely self contained?
Roughly how large would the minimum set of manually imported files end up being? When I use NPM to install angular2, it winds up being ~80mb - a large portion of this (most?) looks like dev tools, test infrastructure, etc. What's the minimal set of angular dependencies needed for the client app to work?
Thanks!
Without resorting to Electron or Ionic2, is it possible (also, is it a good idea) to create the offline experience in Angular2 and then only manually include the resulting transpiled .js files in my Visual Studio project?
Yes, it is possible. TypeScript will be compiled to javascript codes, which will be consumed by your project. So eventually, it is compiled js codes that will be necessary for your project.
But, if you are so worried about your project's size, then I suggest you using Angular 1, which is only JS codes. And for the minimum size of Angular 1 and its dependency jquery. There is a compressed version of Angular 1 (angular.min.js: 164kb) and jquery(jquery-3.1.1.min.js: 85kb).
Answering my own question here:
Yes, it's possible. You can copy over the transpiled .js files and then simply point the webview control at the generated index.html. With that being said, it's a pretty kludgy dev experience since you're constantly working around VS.
The dependencies are handled for you - it's all in the minified/uglified js files.
I haven't investigated tree-shaking yet, but it looks like I can get away with ~0.5Mb with a skeleton project.
I am new to d3.js and it seems like there are a lot of options when it comes to developing and hosting projects.
Options include:
bl.ocks.org
plnkr.co
jsfiddle
jsbin
vida.io
etc.
I can also run a web server with python for local development, but in my case, I am not able to host my projects locally.
bl.ocks.org is really popular, but I have run into many caching issues when using it to develop code (make a change, wait 5 mins, see the change).
At the moment, I was thinking that the best bet would be to develop locally then put the code in a gist and use bl.ocks.org to host it.
My question is:
Is this a fairly standard and sensible workflow for d3 and are there any other services out there that you recommend I should use instead of bl.ocks.org?
Develop locally. For most D3 work you don't even need a server running, since browsers will "serve" static html, javascript, json and csv over the file:// protocol (EDIT: except Chrome). This makes the development cycle simple, fast and easy.
Deploy with GitHub. If you're just serving static pages and not hosting anything else, it's the fastest way to get something up on the web. There are two good ways to do this:
Gist hosted, view on bl.ocks.org. This is great for little examples and one-off tricks. The best part of this is that it just works, no configuration necessary. Also it's neat to see the auto-generated gallery of your visualizations.
GitHub Pages. This is best for more significant projects, since you can completely customize the interface to your liking (and even use your own domain!). Just don't forget to put a "fork me" ribbon in the corner.
And please do post any neat visualizations you build to the gallery!
I have used backbone boilerplate on the past
https://github.com/backbone-boilerplate/backbone-boilerplate
I want to use marionette on my next project and I have found this
https://github.com/BoilerplateMVC/Marionette-Require-Boilerplate
My question is if it's a good idea to go with the marionette boilerplate or start form scratch.
As an aside, I'd like to suggest you give Yeoman a shot for scaffolding your first Marionette app. Yeoman works via what are called "generators", and provide much more than the the above Boilerplate MVC can offer you (Chai and Sinon for testing, Bower for client-side package management, etc...). Plus, Addy Osmani, who runs backbone-boilerplates is one of the heads of the project. Check out generator-marionette here.
I haven't used BoilerPlate, but glancing through it, it certainly seems like a valid approach to writing Marionette apps. If you're just getting started it will certainly help you see how the various pieces are supposed to be used. One gripe I've got is the folder structure. I prefer to break my applications down into modules, and then add models, collections, views, etc under each module. But this will certainly get you up and running quick, and there's nothing stopping you from customizing it to suit your needs.
I agree with others here: it is a useless limitation to imitate a folder structure that follows the 'old mvc model for server-side code'. You will remain more flexible further down the road if you think of your application strictly as completely self-containing modules, i.e. they contain their own controller/router/views/collections/templates etc. You can have a separate folder structure for shared code that is not a module, although anything can be made a module :)
Regarding boilerplate code and generators: i think in the beginning you should actually NOT do it, because you won't understand what you're doing. But that's just my personal opinion.
I am new to open source Content Management System tools. I got a website using Joomla for content management. Now, I am just thinking to Umbraco or Dotnetnuke (any Asp.net based) frameworks to use. Will it be a complex to do this migration. Can you suggest pros and cons for this idea.
Any help is appreciated. Thanks !
For Umbraco ...
Most of your client-side code like HTML, CSS and JavaScript can just be copied straight over, but as expected it may require some fiddling.
As for the data, it might be worth looking into the CMSImport module for Umbraco. As long as you can convert the source data into one of the formats recognised by the module, you should be able to upload your content with ease. I've had no personal experience with this module, but should be worth a shot.
It really depends on the size of the site and the functionality requirements. For smaller sites, it may be as easy as implementing the skin based on the original design (or, if a custom design isn't needed, selecting a free or 3rd party skin) and then manually migrating the content. For really large sites, you should be able to write scripts to migrate the content. I'm not aware of any products that do this. You'll also probably need to select some modules to use for things like forms.