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.
Related
I am beginning to use Go for web development, but I am having issues with asset management. I would prefer to have a tool like Rails' Asset Pipeline for managing (and compressing) css/js files (as well as SASS), but I am still able to work with css and js files.
While I am able to work with css and js, I am not able to work with SASS. Is there a way to use SASS in a Golang project? I am not using a framework.
Thank you!
I'm not familiar with Ruby on Rails but, I assume, that ruby on rails gave you some sort of tools for managing the source to distribution client-side asset transition (polyfills, transpiling, minification, compiling of SASS/SCSS to CSS, compiling of XScript to JavaScript ... etc).
While a web development framework might do that to try and ease in developers quickly (I assume rails does that, not ruby) its not exactly the way Go does stuff.
Go is a language, not a framework + language, just a compiler, a few build tools and a set of standards for how to write, test, document and indent stuff (with the indent,test and document part being optional).
A go server, at least the way I built servers with go, is somewhat decoupled from the client. It server static assets when they are needed (e.g. it serves the minified JavaScript and the stylsheets and the html, and jsons with info from the databases... etc), but it doesn't really care about what those are, its a server. The go toolchain is made for building golang applications (e.g. said server), but its not made for building client-side web applications (those consisting of js, css and html).
Now, you may use a framework similar to rails written in go that helps "pack up" css, js, html. But I'm unaware if there are any.
You may use a compiler which turns go into client-side code (i.e. javascript) https://github.com/gopherjs/gopherjs , if you enjoy the go toolchian and want to use it for client-side development. But, go-like performance isn't something this gives you AND you are working with a subset of go. Its really just a different way to write javascript.
However, what you most likely need in your case is a "build-chain" for your client side. Here there are 3 tools which (in my opinion) stand out in 2016:
npm
webpack
bower
I could write an essay about using this tools but here's the summary:
Webpack is used to create a "pipeline" for your code which does thing like, calling babel on javascript, compiling sass to css, minifying assets, allowing js to be written with import syntax... etc, really, its a swis army knife in your js development arsenal and probably matches the functionality of whatever you were using before.
Npm is the node package manager BUT even if you are not using node for your server. It can be useful to keep tracks of dependencies for building your application (like webpack) and for downloading modules. Its also useful for running various scripts and deployment, its a bit of an overkill to use both npm and weback though you will probably have an easier time setting up the webpack enviornment if you have a package.json (config file for npm) with each of your project.
Bower is one I actually don't use for small projects. But its basically a repository for javascript libraries (among other things), so you can easily say, write "bower install jquery" and you've downloaded jQuery for your current project.
Again, there are many other tools out there, these are just some of the ones I like, but, check some of them out. They can help you replaces your previous pipeline. Don't think of client and server side code as being the same, they are decoupled and having a strong separation between them might help you a lot.
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
background
I have designed many tools in the past year or so that is designed to help me program for XPages. These tools include primarily helper java classes, extended logging (making use of OpenLogger and my own stuff), and a few other things that I personally feel I cannot work without. It has been discussed with my employer, and we feel that it might be a good idea to start publishing these items to openNTF. Since these tools are made up of about 3 .nsfs, all designed to use the same java code, key javascript classes, css, and even a custom control or two, I would like to consolidate key items into a plug-in that can be installed at the server and client level. I want to do this consolidation before I even think about publishing any of the work I've done so far. It would just be far too much work to maintain, not just for me, but for potential users. I have not really found any information on how to do such a thing in google searches. I also have to make sure that I am able to make use of the ExtLib libraries, openNTF Domino API, and the Notes API.
my questions
How does one best go about designing such plug-ins? Must a designer
use eclipse, or is this it possible to do this directly in the Notes
Designer?
How does a designer best go about keeping a server and client up to date while designing and updating the plug-in code? Is this why GitHub is often used?
Where is the best place to get material to get started in this direction? I sort of feel lost in the woods, knowing I need to head north, but not having a compass for that first step.
Thank you very much for your input.
In my experience, I found that diving into plug-in development is a huge PITA until you get used to it, but it's definitely worth it overall.
As for whether you can use Designer for plugin development: yes, but you will likely eventually want to not do so. I started out by using Designer for this sort of thing for a while, presumably with the same sentiment as you: why bother installing another instance of Eclipse when I'm already sitting in one all day? However, between Designer's age (it's roughly equivalent to, I think, Eclipse 3.4), oddities when it comes to working sets between the "Applications" and "Project Explorer" views, and, in my case, my desire to use a Mac app, I ended up switching.
There are two major starting points: the XSP Starter Kit (http://www.openntf.org/internal/home.nsf/project.xsp?name=XSP%20Starter%20Kit) and Niklas Heidloff's video on setting up Eclipse for XPages development (http://www.openntf.org/main.nsf/blog.xsp?permaLink=NHEF-8RVB5H). The latter mentions the XPages SDK (http://www.openntf.org/internal/home.nsf/project.xsp?name=XPages%20SDK%20for%20Eclipse%20RCP), which is also useful. In my setup, I found the video largely useful, but some aspects either difficult to find (IBM's downloads are shifting sands) or optional (debugging, which will depend on whether or not you're using Eclipse on Windows).
Those resources should generally get you set up. The main thing to worry about when setting up your Eclipse environment will be making sure your Plug-In Execution Environment is properly done. If you're following the SDK setup instructions, that SHOULD get you where you need to be.
The next thing to know about is the way plugins are structured. Each plugin you want to install in Designer or Domino will also be paired with a feature project (a feature can house several plugins), and potentially an update site - the last one is optional if you just want to import the features into an Update Site NSF. That's how I often do my normal plugin development: export the paired feature to a directory and then import the feature into the server's Update Site NSF and then install in Designer from there using Application -> Install. You can also set things up so that you deploy into the server's plugin/feature directories instead of taking the step of installing into an update site if you'd prefer. GitHub doesn't really come into play for this aspect - it's more about sharing/collaborating with your code and also having a remote storage location for your git repositories (which I highly advise).
And as for the "lost in the woods" feeling: yep, you'll have that for a good while. There are lots of moving parts and esoteric concepts to get a hold of all at once. If you mostly follow the above links and then start with some basics from the XSP Starter Kit (which is itself a plugin project that you can pair with a feature) - say, printing text in the Activator class and making an implicit global variable just to make sure it works - that should help get your feet wet.
It's best done in Eclipse. You can debug your code running on the server from there, as well as run it directly from there. The editors are also more up-to-date. You want:
Eclipse for RCP and RAP developers
XPages SDK for Eclipse RCP (from OpenNTF)
XPages Debug Plugin (from OpenNTF - basically allows you to load the plugins to the Domino server dynamically, rather than exporting to an Update Site all the time)
XSP Starter Kit on OpenNTF is a good starting point for a plugin. There are various references to the library id, which has to be unique for your plugin. Basically, references to org.openntf.xsp.starter need changing to whatever you want to call your plugin. You're also best advised to remove what you don't need. I tend to work in a copy of the Starter, remove stuff, build and if there are errors with required classes (Activator.java obviously will be required and some others), then paste them back in from the Starter.
XPages OpenLog Logger is a good cross-reference, that was built from XPages Starter Kit. It's pretty much stripped down and you'll be able to see what had to be changed. A lot of the elements of the XSP Starter Kit correspond to Java classes you'll probably be familiar with from your XPages Java development.
GitHub etc tend to be used as source control, which is useful for working out what's changed from time to time.
So I am very interested in using LESS with Bootstrap and Visual Studio. THe problem I'm having is that Web Essentials doesn't seem to be able to compile css from the Bootstrap LESS files. I've done some poking around and it seems that Web Essentials doesn't understand semicolons or something to that effect, which is causing it to choke on bootstrap's less files.
So, are people using LESS with bootstrap in a VS environment, or have I wandered onto the fringe?
Some tools you could use:
Web Essentials - I can tell you it does work with Bootstrap as I've used it before
Web Workbench - A paid alternative, I prefer web essentials
GruntJS - A JavaScript task runner that you can configure to build various resources and hook it up to your post-compile step so it happens automatically
Personally I'd go with grunt, while it's not very commonly used tool in '.NET', once you've used it you can see the awesome power it gives you. It's open source, and has a tonne of open source plugins that lets you do heaps of stuff, plus you can write your own.
Some examples of plugins: minify JavaScript; compile SASS, LESS, TypeScript, CoffeeScript, Markdown, etc.; copy files; delete files; optimize images and so on.
Check out WebEssentials (as you've already found, if it doesn't work, try filing a request or an issue) or the Mindscape Web Workbench and finally the BundleTransformer. Your request isn't a fringe, the web is embracing these technologies, so is Visual Studio.
If you'd share the exact messages you're seeing, or the steps you've taken so that we can reproduce, we can help you better. As far as I can tell WebEssentials should work with Bootstrap's less files just fine.
Dashcode keeps source files in a ".dcproj" project file, which is really a package to OS X, which in turn is actually nothing more than a directory structure. I'd like to continue to use Dashcode but without the "convenience" of the ".dcproj" structure. Why? I want to...
check the source code into Mercurial
use TextMate when developing the non-GUI parts of the code
eventually build and deploy platform-specific customizations of common core code (i.e., have multiple projects share some common source
I can deploy the Dashcode project into a directory and then do all of the above. But once I do, I likely cannot return to Dashcode, which is quite handy for visual stuff. A more flexible solution would enable me to tell Dashcode where the code is and to read/write it there, not in a ".dcproj" package.
I haven't heard of anyone doing this - but it would cool because checking a dashcode project into source control is a total pain in the neck (I'm Versions for SVN and it totally chokes on dashcode - I don't think its Versions' fault - but who knows..)
I'm finding dashcode quite good for GUI stuff, but its just a neglected product, so there are lots of things that are sort of developer hostile in it.
So here is how I'm using dashcode now:
I use dashcode for GUI layout.
I publish to www_cache_dashcode
I have my custom javascript files in www_client
I then have a little make file that copies everything from www_cache_dashcode to www_client
www_client is under version control, but I exclude/ignore the files that are copied in from www_cache_dashcode
www_cache_dashcode is not under version control
my dashcode project is under version control, but I only rarely update it because there is ALWAYS a conflict. (I'm sure its somehow my fault - but whatever).
Hope this helps,
JJ
One thing to remember, but i am still looking at this to gauge the effect, is that Dashcode will generate code. This can be switched of and on. menu > View/Stat Code Generator or View/Stop Code Generator.
Apple do not say a lot other than "Because the canvas generates HTML and CSS automatically for you, you may want to turn its code generation off if you’re tweaking elements by hand. To turn off the automatic code generator, choose View > Stop Code Generator. When you’re finished tweaking values by hand, you can turn the code generator back on by choosing View > Start Code Generator."