Generating HTML5 Applications - javascript

When you are using .NET winforms for example, it is possible to generate a form or any other class on the fly. You can create classes in runtime via IL coding, or by letting compiler to generate code and load it into AppDomain and instantiate it and show it via ontheflyform.Show();
I know there are some templating libraries like JQuery Template, Kendo UI templates, Jade is more like what i search i guess but without on the fly generation.
Is there any feasible way to generate HTML5 aplications on the fly?
with requirements like
routing functionality, like http://domain.tld/customers/edit/1 or http://domain.tld/customers/view/1
form and dialog creation in runtime via Javascript which would be created by "the thing" i am searching
possibly with Kendo UI (any better idea) and without any more external dependencies
OR should i write it by myself? what would you do?
What i imagine is like a "some base HTML5 application" which pulls necessary details (forms, links, menu structures,css etc) from server to render what it gets. And no, i dont mean browsers with that but some base HTML5 applications which runs on broswers and renders what it needs to render.

Related

.NET Core Web UI that best supports vanilla javascript with DOM manipulation

I have created a very interactive svg element with hundreds of individual components and many types of user interactions, right click menus, etc with vanilla javascript because it was so much faster than any framework.
It works great, the only problem is I now need to inject this into a website build with individual user logins, a database, a nice dashboard of past projects, etc. I need to have a button associated with the svg "save" the status and write to the database. I want to use ASP.NET for its friendliness with Microsoft products like Excel (I need to read user Excel uploads and parse Excel files).
My question is which ASP.NET core UI choice is going to allow me to build this full stack easiest, quickest, while injecting this svg with all of it's vanilla javascript functions.
I've watched youtube tutorials and read a lot of the microsoft docs on ASP.NET core and the UI choices. I don't think webassembly with Blazor would be the way to go because it's too reliant on C#, and may slow down my javascript calls if I have to go through the c# middleman. I really don't want to have to learn react or angular and do the SPA from the ground up, but if its what will maintain my quick vanilla javascript I'll forge ahead. I think MVC might be the quickest way to build a website up quickly, but I"m not sure it will support my vanilla js with dom manipulation of the svg.

Grabbing HTML from another page

I have two HTML files: One acts as a template, supplying the navigation, sidebars, etc., and the other has the main content. I'm trying to figure out how best to insert the content into the template. I need persistent URLs, so my plan was to have the content page essentially replace itself with the template, plugging the text back into the resulting page. I'm really new to front-end programming and I'm suspicious that this may be an anti-pattern, so my first question is about whether I'm barking up the right tree. The problem seems universal, and I'm sure there must be a best practice, though I haven't yet seen it discussed. If this is an acceptable way to proceed, then what JavaScript function would allow me to access the HTML of two different pages at the same time?
[EDIT: It's a small page on GitHub]
Do not do this. At current implementation HTML is not designed to be template engine. You can use HTML import but it has not full support in browsers. (compatibility table).
Usually this problem can be solved with:
Use frontend framework. Libraries like angular.js or polymer.js (and so on) usually has support of importing HTML documents in different forms.
Build your application HTML. Task runners like grunt.js usually has plugin that includes HTML.
Use server side technologies to extend your HTML from base layouts
If your application have to be consisted from different HTMLs I recommend you to try polymer. It is polyfill for web components and designed to work in such way by default.
UPD:
About edit to your question. It seems like you just need template engine for HTML. You can google for it. I use nunjucks - javascript port of python's template engine jinja2. It is lightweight, simple and can be compiled right in browser.
Another way is to use special tools for building static web pages. You have mentioned that your page is blog build from simple HTML pages. Try to use pelican. It is the static websites (blogs) generator. It is simple and fast. You can build your HTML even on your local machine and just push your HTML pages to github.

Scripts management in ASP.NET MVC

I'm building the ASP.NET MVC application containing widgets - user can define in the administration panel which widgets (which are being in fact partial views) will be used on page. Each widget has references to jquery library which is common for all widgets but also to jsquery plugin file which contains the logic specified for particular widget.
The problem which I found is to load efficiently only the scripts needed on the page (based on the user defined set of widgets) and minify them in one scripts.min.js file.
The build in MVC bundling allows me to define some sets of scripts, by the problem is that I don't know the exact set of widgets and I don't like to list all possible combination, I need to do it dynamically (on server side - from the perspective of performance), based on user choice.
There are Require.js library, but it will do everything on user side, and there will be many requests for each one jquery file and an the end the combination of everything into one file.
Do you have any ideas, how to make this working in efficient way?

Merging HTML files in a SinglePage application

I'm developing pure JS + HTML application. To keep the code clean I would like to separate my application into the several html files (i.e. ClientView.html, HistoryView.html etc). Based on user actions one or another view (or several views) would be displayed. Each view is supposed to have an underlying code in a separate JS file.
What I really want to achieve is following:
Develop view as HTML page (do not use any kind of javascript templating)
Views and viewmodels are loaded on the fly (only loaded when needed)
Some way to control dependencies.
I would be very thankful if you advice me a good start for that, as I'm quite new to modern html applications development. I myself is from WPF world, and I've been working with MVVM applications for a very long time, probably I'm wrong trying to bring same experience to javascript development.
I've found several posts about "compiling" html - (HTML "compiler" / merging application), but I don't think that it is what I need.
p.s. In my project I'm very dependent from several features from Twitter Bootsrap (first of all from grid systems)
Use a master page which contains some div to make the layout. Use JQuery to dynamically load various pages and insert into the div in the master page as required.

Which Javascript framework/library to use to manage views/screens in an HTML application?

I am developing an rich Javascript application, using jQuery and some plugins. The application I am developing is becoming rather large and unwieldy. My main problem is managing views: I need to switch between views, some of which share the same components (like embedded views or partials). Currently my "screens" are all contained in various divs, and I am switching between them by hiding one and showing another. This makes navigation quite complex.
My question is: Is there a lightweight Javascript library that can help?
Following requirements:
No generation; I want to change the code on the deployment server, so frameworks requiring some special compilation are out of the question (like Sproutcore or GWT)
Model binding is not a necessity; I am getting the values from various forms and submitting them via Ajax requests
Want everything loaded upfront (i.e. not fetching screens with AJAX)
Must work with IE7
mootools, you can select what components you need from the framework.
http://mootools.net/core/
It turns out that what I was looking for all along was Dojo.
Dojo provides as part of its library the dijit subset library, which covers all the needed UI metaphors, including containers.
Also, as required, it does not involve any compilation as do many of the other Javascript (MVC) frameworks, and it supports IE from version 6.

Categories