I'm currently developing an app using Apache Cordova via Visual Studio, and a lot of my webpages are very similar - a while ago, I had used Django and found its templates (https://docs.djangoproject.com/en/1.10/topics/templates/) very useful for these situations. Does Apache Cordova offer and functionality similar to this? I was looking into Handlebars.js, but it seems like I cannot easily call an entire HTML page template in the same regard as I could using Django templates.
Cordova isn't really prescriptive in this regard. I'm currently using Handlebars.js in my app (link), but I know that there are others -- mustache.js, jQuery template, angularJS. Handlebars just happened to be the one I came across first.
Related
I would like to create a Single Page Web App with Angular but I couldn't decide to project type.
(Just generated files by tools like angular-cli or that generated files inside an Asp.Net Core Project)
I got some question.
What are the advantages and disadvantages of building angular app on ASP.NET Core Project?
Which cases I should prefer to locate angular app inside a ASP.NET Core Project?
I'd like to take a stab at this. I'll agree that the answer is on some part opinion based though.
I have just been comparing the two versions for a new project that I am involved in.
First some facts
The Angular project created inside of the ASP.Net core application is in no way dependant on the .Net code. You can navigate to the directory and type ng serve and run it by itself.
You can copy the angular code to another directory or repo and host it by itself if you for some reason later on decide that you don't want to combine it. All you have to do is copy paste the angular code, and then remove some lines in startup.cs regarding the internal hosting.
The code that gets added inside of the asp net core template is close to the base angular app with a few examples added on.
If you use the login functionality template it implements an oidc client, and an identity server on the back end, (opinion) pretty much the same way I would have done it myself. There is nothing stopping you from rewriting it if you don't like it. At worst it's a good example of how it can be done.
As of today the template is using Angular 8.0.0, you can just change the package.json to get the latest version and run npm install. It works great.
You can still use Visual Studio Code for the Angular parts with a combined project.
Here are when Id choose the different versions (warning opinions ahead).
When to choose the asp.net core angular project.
Small web app with limited functionality.
Small team, probably same person writing angular code as api code.
If you are unsure. You can always split later.
When to choose separate apps.
Big team with deployment builds and automation.
If you want to host angular and asp.net core separately (for reasons such as to achieve maximum performance and load balancing in apps with thousands of visitors).
Separate people coding angular and asp.net
You don't like having it all in same repo and want to split it up.
In a bigger teams and contexts with multiple APIs you will probably have to deal with CORS anyways, but if not you will have to at least think about it for this to work.
If you are unsure, you can always combine it to one app later.
What are good practices about building a multiple page application using modern JS frameworks?
Multiple page application
In multiple page application we have multiple templates using some “template syntax” to provide us with backend data and AJAX (if needed) or advanced UX voodoo is often handled by jQuery.
Single page application
In single page application “backend data” is provided by AJAX requests and whole routing, frontend logic is handled by JS. We often use some JS framework like Angular or React and compile our sources with task runners/bundlers like webpack or gulp.
Hybrid application
But the most popular around the web seems to be hybrid app. What is typical build workflow while working with such an app? I could not find any tutorials or guides.
So to be specific. I imagine webapp where in which, each page has to be compiled and could share some resources. Every page has own JS routing like wizards or subcomponents. Data is loaded both during page load and AJAX.
For example my webapp would have 3 pages:
guest page - would provide website user with limited content and attract him to sign up
user - would provide signed website user with full content, resources would be extended guest content
admin - shares only styles and webapp “core”
Task Runners/Bundlers
For example in webpack is there a way to specify multiple entry and output points? Maybe the better way is to have multiple webpack/gulp configurations. In that case If I have a lot of pages I would have to write webpack/gulp configurations for every page even though some of them could be exactly the same. How to run that kind of build?
Sharing resources
Will browser load cached js bundle with the same hash like bundle.a2k4jn2.js within the same domain but different address? If so, how to specify such a behaviour in tools like webpack or gulp. I heard about CommonsChunkPlugin but not sure how to use it or even I’m looking at right direction.
Templates
What if I want to load some “backend” data not by AJAX but at the page loading. Of course every templating engine provides us with ability to write native code directly in html template like JSP or PHP. But what if some routing is handled by JS and “template tag” is not visible for page at initial loading i.e. template would not be compiled. Sometimes template engine in server and client could have the same special tag like Blade and Angular which can lead to conflicts.
Directory structure
I suppose that in hybrid app frontend and backend will be tightly coupled. Sharing JS in hybrid app could lead to very complicated imports (in es6 or html script tag). How to keep it simple.
Deploy
What about deploying an application? In java it’s easy because we just specify directories (compiled pages) in build tool (maven, gradle) which be copied to jar/war, but in PHP source code is not compiled how to keep “js source” away from production I could not imagine sensible resolution other than writing own batch/bash script
Summary
I have mentioned specific technologies and frameworks. But my question is about common approach to work with such an webapp rather than “how to do sth in that tool”. Although code examples would be greatly appreciated.
Their is a lot in this question, as a starting point you can define multiple entry points in webpack.
https://webpack.js.org/concepts/entry-points/
If you want to mix data loading between FE and BE then you really need to write an isomorphic JS application and use Node as your BE, otherwise you’ll end up writing everything twice in different languages and having once come across a project like that, trust me you really want to avoid that.
The other bit of this question on shared resources is best answered by WebPack’s bundle splitting which is made for what is being asked here
https://webpack.js.org/guides/code-splitting/
Not sure if I totally understand the question, but single-spa (yes it's redundant) is a tool that can be used to combine multiple apps (even if they are different frameworks) into one single page application. Link to the docs: https://single-spa.js.org/docs/getting-started-overview
I recently started using WebStorm to implement web applications and find the experience much better than using Visual Studio.
I am considering moving the "view" part in mvc to pure html as much as possible without relying on server template engine such as Razor. So that I don't have to open visual studio until server side code is needed.
Google results showed that client side template engines such as Handlebars and Mustache will be able to help generate dynamic html pages. One thing I have not found is that ability to combine "parts" of pages together (like the master page in asp.net) so that we don't need to copy/paste header/footer everywhere.
How do I achieve "master page"-like functionality with client side (i.e. javascript) solutions?
Thanks for your help.
You could try this:
use 'shtml' file to struct your webpage,so that you can reference the include instruction:
<!--#include file="head.html"--><hr><b>Hello,this is body!</b><hr><!--#include file="foot.html"-->
As to 'head.html' and 'foot.html',well,you know what should include in them.Actually,they are 'div' segments~~~
I love the demos of ASTreeView. I'd like to use this in my project, which is completely local and currently only uses HTML, JavaScript, and CSS - i.e. no ASP.net or anything dealing with servers...
Is it possible for me to use this? There is a .dll and a .js included in the package, but I have no clue where to start since this isn't a ASP.net project for me. I can't find any documentation on this library.
ASTreeView is a ASP.NET server side control. It is used on .aspx pages that are typically run on Microsoft IIS servers or any other server supporting ASP.NET. Take a look at ASTreeView - Free ASP.NET TreeView Control on CodeProject.com for a nice tutorial on this free control.
UPDATE: There are stupid questions, and this is one of them. I didn't realize that serving JavaScript via Django was so large a question. When I've answered it, I'll post the most useful resources for those who want to RTFM, unless the mods close this first. Until then, sorry for wasting your time.
How do I install and configure Tiny MCE, Apache2 and Django so Tiny MCE is available as a local application only? I think what I want to do is setup Apache so it serves only the local computer, and does so with Django to provide a Tiny MCE editor. Apache2 and Django are already installed but I don't know how to integrate Tiny MCE to achieve this result.
I'm a newbie to web development and frameworks, so I might be missing an obvious solution to this problem.
(Why am I doing this?
I want a WYSIWYG HTML editor that will let me edit a document's formatting and see how that affects the HTML, and edit the HTML and see how it affects the formatting, while using a CSS stylesheet.
I will want to serve this functionality to the web over a SSL connection but don't yet want to set that up just yet.
The web application will go through Django, so I want to get things working through that framework.
I'd like to see a JavaScript application in action.)
Thanks for your patience.
UPDATE: Is this better phrased as:
How do I serve a javascript application through Django?
How do I make that service available only to the local computer?
Question #2 seems to have been answered.
Bind Apache to the 127.0.0.1 interface only. The documentation can be found at http://httpd.apache.org/docs/2.0/bind.html
What you serve is irrelvent as far as this question is concerned, since you are just trying to control where you serve it too.
In response to q.1 - you don't, normally. Django does not serve static media like JS files, images, etc. Having said that, there is a tinymce app for django which eases the integration. http://code.google.com/p/django-tinymce/ works well for me.