Front end technology that works for both Mobile and Web - javascript

I'm building and application that has the backend in j2ee (ejb, hibernate, mysql). The web application front end was initially designed to be in jsf (primefaces) with backing beans.
Also, it has been decided to use cordove / html5 pages in he future for the mobile app.
I'm very new to this and have a couple of questions in reusing the code for both web and mobile app and integration of these different technologies. Instead of developing separately for the mobile
If I use pure html5 / javascript can the same page be used in the web application as well as the codova mobile app.
If so, What about the normal backing bean logic. Where do I put that now? Can the backing bean be accessed by the cordova html5 page? Also jsf binding, How do I receive data in the web page
Is javascript the only way to access the rest webservices? Will I be accessing these from the web app as well as the mobile
All in all, does developing with cordova html5 / js / css means staying away from jsf 100%. And this means no access to jsf components or frameworks like primefaces. Is there anything else to replace these technologies to be compatible for both

If I use pure html5 / javascript can the same page be used in the web
application as well as the codova mobile app.
Yes, that's kind of the whole point, you can even use jquery etc inside a cordova app.
If so, What about the normal backing bean logic. Where do I put that
now? Can the backing bean be accessed by the cordova html5 page? Also
jsf binding, How do I receive data in the web page
Any backing logic can be served by anything, Node.js, PHP, etc etc..
Is javascript the only way to access the rest webservices? Will I be
accessing these from the web app as well as the mobile
There should be no change in logic here, both can use ajax to access your webservices.
All in all, does developing with cordova html5 / js / css means
staying away from jsf 100%. And this means no access to jsf components
or frameworks like primefaces. Is there anything else to replace these
technologies to be compatible for both
Anything backend, can stay as is. So if you have any REST API's, they will still work.. Anything client side is going to be new,.. Primefaces you mentions -> PrimeUI is a pure CSS-JS library designed to work with any server side and client side technology, so you should be able to use that, they also have an Anglular2 bindings that should also work.
Ok, I'm updating this to explain what backend is,. If your backend has any logic, eg. Say you had some logic that posted invoices, if this was all self contained, and didn't depend on anything visual / interaction, this could easily be exposed and re-used. You would just need to expose this, by providing some sort of IPC, wherever that's a simple REST api, or even websocket based API, doing this means the only part you need to rewrite is the front-end (Visual stuff) & some sort of IPC for your backend services..

Related

What is the purpose of template engines in Java?

I'm an android developer and about two years and recently I've been thinking about building web applications. So I started researching about spring boot and everything is great. Then, I came across this thing called template engines (thymeleaf) which by definition separate your code from presentation.
What is confusing me is how can a backend server have html? should the presentation be handled by html, css and javascript in the front end? I even saw tutorials where they actually type in html code in their controller as return values.
My understanding is that the backend server exposes APIs for the frontend to use by using AJAX and the frontend will manipulate this data and present the information on the screen, why would a backend provide html code?
THank you
the frontend will manipulate this data
What front end? You mean the JavaScript code in the HTML page? Where did that come from? Oh yeah, the server.
It is the server that serves the HTML pages to the client, as well as any .js and .css files.
The server could provide static pages, and anything dynamic is handled by JavaScript. Or, the server could dynamically build the HTML page, using ... you guessed it ... a template engine.
You generally don't want JavaScript to build the page initially, just to use JavaScript for handling any dynamic behavior. Some pages don't even need any dynamic behavior.
Unless of course you're thinking about single-page applications (SPA), where there is only one root HTML page, and everything else is built client-side with JavaScript and AJAX calls, but most web applications are not SPAs.
Thymeleaf replaces JSP by providing HTML pages using a template engine. The controller requests the HTML file and Spring Boot provides that template after building it using the Model provided.
Thymeleaf is great because it allows you to rebuild templates on the fly. Lets say for example you're showing a users points to them on the front end, but maybe the points increase or decrease.
What you can do is build the template in the background using a Model. The Model reference is magically provided to the template provided which parses it.
#RequestMapping(...)
public String request(Model model) {
model.put("points", 5);
return "my-template.html"
}
Then use the Thymeleaf language to provide your object to the HTML file to be processed in the engine during runtime.
<html..>
<head>...</head>
<body>
<h1 th:text="${points}"></h1>
</html>
Spring Boots Template engine will build this in the background and present it to the user, but it will show the actual points to the end user! Hope this helps a tiny bit.
I know this question has been answered pretty effectively so far, but I want to add my two cents in as I work with Thymeleaf often.
The easiest way to think about a template engine is that it allows some dynamic development of html based on information passed to it by the controller method. This allows you to put logic in that normally wouldn't exist, or say display a certain section if a user is perhaps logged into admin.
If web pages were houses, html is the frame, css is the walls, Javascript is the lights and electricity, and a template engine would pretty much just be the architect designing the plans on the fly before the frame was built based on desires of the buyer of the house (user inputs).
OK, newer Apps and websites may just load/boot/open once and then pull or push data via AJAX requests, this is good, it saves traffic and it is fast.
But it has not always been like this and some Frameworks still don't build everything on small requests. Spring in Java or Symfony in PHP are MVC Frameworks and use template engines to build pages. This may sound a little outdated but there is still a lot of websites using this.
And if you build a web app for a customer with slow PCs or other devices and the page contents are performance heavy you might want to do as much work as possible on the server so that the user does not have to wait for long. And also you can cache the rendered pages. There is even server side rendering of react pages to e.g. make the initial page load faster...
With Java and Spring I did just use JSP I don't know thymeleaf. Just use what you like and maybe what is most supported/documented.
And building websites like this does not mean you cannot use AJAX, but if you use templates you need to think about what makes sense.
What is confusing me is how can a backend server have html?
The "back end" must have HTML, because that's what's delivered to, and rendered by, the client.
It may just be that the back end "server" is just a CDN delivering, say, an HTML/JS SPA, but there's still something delivering content to the browser.
That said: server-side rendering is still a thing, and has had a resurgence lately--a React app may have its initial rendering done on the server so again the client gets a page rendered with both HTML and associated data, and then starts acting like a normal SPA.
My understanding is that the backend server exposes APIs for the frontend to use by using AJAX and the frontend will manipulate this data and present the information on the screen, why would a backend provide html code?
Because something needs to run the JS to access those APIs.
Some history:
Browsers used to suck. JS used to be a neat add-on, sites were relatively static, and essentially all rendering was done on the server. The back end would get data from wherever it got data from and generate complete HTML pages, and there was little happening on the client side other than some form fields, maybe some validation, and that was about the extent of it.

How do I go about creating a javascript ipad app that uses local storage?

I need to create an internal admin app. The app needs to be able to:
For V1
- Wrap and execute javascript code
- Will not rely on any iOS code other than perhaps the code necessary to load the javascript.
- Uses local storage
For V2
- Work offline (which means javascript code needs to be loaded in)
Any ideas on how to go about implementing such a thing?
By far the easiest and best supported way is to use Apache Cordova. They did all the work of wrapping a Webview in a native app and have a rich set of plugins for integration with all kinds of mobile APIs.
Since the app will be running in an embedded browser you can simply access the normal Localstorage APIs.
The Cordova tutorial by #ccoenraets may be a good way to get started.
From my findings the following two are great solutions:
Ionic
Apache Cordova

Creating a dynamic web page using AngularJS, WCF Service and SQL Server

I want to create a web application and I am exploring how I could do this. So I came across AngularJS. I want to use WCF Service and SQL Server in my application also. I am trying to find what AngularJS, WCF Service, SQL Server can do for me because I do not want change technologies in the middle of my project after discovering that AngularJS cannot do things which I want my application to do.
So, my question is can AngularJS help me create Static web pages and Dynamic web pages?
I can start my project in ASP.NET MVC but I want to explore AngularJS and want to find out what it is.
My project is about
Sending E-mails
Displaying content from database (in any manner using Ajax)
Voice chat, Video chat, Text chat
Can contain Javascript, jQuery, CSS, HTML5
Tell me something about it. Any suggestions?
Thanks
Your question is vague, but I'd suggest using Microsoft WebAPI instead of WCF or even ASP MVC, due to the from the ground up RESTful design of WebAPI and much easier configuration.
Using this approach, you'll still be able to query SQL Server in C# using WebAPI, so you won't need to switch your database.
There's very little documentation by comparison for querying non-RESTful web services, so you'll gain a huge advantage in terms of tutorials, blogs, etc. by going this route.
Please see below for your questions:
Can AngularJS help me create Static web pages and Dynamic web pages?
Yes certainly it can. Check it out at the official website
2.Sending E-mails
This should be the server side responsibility using an e-mail client, for instance SMTP client
3.Displaying content from database (in any manner using Ajax)
Yes, it certainly can.
4.Voice chat, Video chat, Text chat
Try WebRTC first to see if it's sufficient for your tasks
5.Can contain Javascript, jQuery, CSS, HTML5
Yes, you can use whatever you want as long as you are sure about what you are doing.
I hope following guidelines will help you.
When you create the project select WebApi template.
Then include angularjs files in the scripts folder.
Use cshtml files,but do as you in html file.
Use angular client side mvc features to build your app fast and performance.
Use the angular http service to call webapi methods.
All the c# specfic features build in the webapi.

Dynamic Server-Side Mobile Template - Does Anything Exist?

I'm wondering if I could get some opinions on whether this development project would be new and useful, or if it has already been done before.
I've been researching an idea that I have to create a premade solution for a "Dynamic Server-Side Mobile Template" solution. In my previous job I was tasked with maintaining multiple mobile clients, each of them having a custom UI skin. Normally this ends up requiring a lot of developer time when clients request UI changes or updates. My goal is to design a system that requires minimal developer input and allows designers complete control over the UI, including:
Ability to update content any time
Version control (push new template designs to client, roll-back to previous versions)
No need for developer input for design changes
What I'm brainstorming is a server side service module which is capable of providing templates on demand using RESTFul web services. The server would provide an HTML input function that would decompose any HTML page to a component tree. The component tree would then be saved to the database and displayed for confirmation & editing.
The server would be responsible for:
Decomposing any HTML page into its' template components
3rd party files such a JS, CSS referenced by path
Displaying HTML component tree for debuging and editing purposes
Saving template component details in the database with versioning
Providing template on demand (via JSON or XML) through RESTFul API
The client could be written using mustache and easily ported to the various mobile devices using the various offshoots (iOS, Android, etc). This thin client would simply send a request to the configured URI designated by the server. The URI would return all template information using mustache syntax, and this would be used to dynamically build the UI on demand. The client could also save the UI configuration and reload only when a new version is released.
To summarize, the client would be responsible for:
Requesting template data (JSON or XML) from predefined URL
Rendering template using mustache, assuming version not already saved.
I would love to start this as an open source project if the demand or need is there, and I'm not re-inventing the wheel. So far I've found similar concepts but none seem to be fully dynamic.

Converting web2py based web-app into native app using Appcelerator, is it easy? possible?

Here is my problem:
Customer wants my current web application as a Desktop, possibly Executable but without browser for the Client part.
I looked into 3 of following :
Qooxdoo - Needs browser
Adobe Air - Needs plugin and Runtime
Appcelerator - Most interesting , builds into Native Client
Here are the main questions:
Client side:
What i have read on appcelerator is it builds things written in html and javascript
into native executable, so what i have already written (HTML + Jquery + Jquery UI + CSS) can be built into Native Windows / Linux / IOS executables without changes to current code ?
Server side:
No problem as it returms html and json and decided to keep running on server. But wondering how offline contents work.
I'm not sure this will actually work. From what I understand, titanium appcelerator provides a framework primarily for you to create applications on the iOS and Android platforms. I did see some things about the Desktop apps, but nothing about the application being automagically created from the source when your backend code is python (and web2py to boot).
I think it might be impossible to just drop your web2py app in and get a final product. For one, how will Appcelerator know that a given URL corresponds to a given controller and function? How will it perform searches on objects in your database? Do you expect it to read the DAL(...) connection string and just connect?
If you don't do ANY server-side processing, and don't use ANY datasources except for JSON, then maybe this would work. Maybe. But I highly doubt it will be automatic, or even all that easy.
It seems to me that you would have to hit every page and save the pages as html to a disc, and then drop the outputted HTML/CSS/JS markup into Titanium. But that means that if you ARE processing forms or searches, or doing anything interesting in the controllers, the titanium application will not have anything to process the server-side backend stuff.
That being said, titanium does work with php code, but not perfectly, And I see issues when using frameworks as opposed to raw php.
http://www.flickr.com/photos/funkatron/4011561849/
It didn't work that great, regardless. Titanium Desktop does still support PHP though, but developing an app with a server-side framework like CI is basically not going to work.
There was also something in the docs about processing python code, but all I saw was that you can place python in the "client" end of the HTML using a script tag as such:
<script type='text/python'>
# ... python code ?
</script>
(ref: http://developer.appcelerator.com/doc/desktop/python )
But that's not going to help with a web2py app.
IN SHORT -- I advise you download the app and create a hello world project. Then follow a tutorial on migrating or converting your application to Titanium. You'll probably have to rework a lot of things, and I'm not sure how you'd get the execution environment required for web2py, so you might have to rework some of the basic GLUON code which web2py is built on.
Sorry :(
You can, however, probably find a way to create a Java application that includes a copy of (a) rocket webserver, (b) python 2.5 or greater interpreter (c) web2py framework, (d) web2py application and package all this in such a way that it runs inside your java application (which will run on any platform) and shows an HTML view to the enduser. Then you could maintain it as a web2py app and just copy the app to your java bundle. I'm not sure if that's any easier in the end, but it looks like you'll either have to port to Titanium or Wrap with Java (or another language suitable platform-agnostic language).

Categories