Hybrid app development: How to separate HTML5 + CSS3 + JS from PHP + SQL? - html

I'm used to the full stack approach of developing where PHP can be used to create dynamic HTML and to handle SQL as well. However, I'm now considering creating an hybrid app that can be used across platforms.
So my questions are: should I separate the app into HTML5 + CSS3 + JS and PHP + SQL webservice? If so, how should the connection be done? with ajax requests to the webservice? Is this the correct approach?
Any suggestions, pointers or names of concepts that I should/could read regarding the topic are appreciated.

I'd recommend a microservice approach. Using docker and some other container orchestration tool.
What I mean is that you could have a RESTful API written in php fetching data from a MySQL db (or any other db). Then simply write your front end app, using plain JavaScript, HTML and CSS, or a JavaScript framework (angularjs, react, etc). Then you could make your front end communicate with your back end through your API's endpoints.
The idea behind creating microservices or 12 factor apps, is to separate your apps in components or microservices. Then with some configuration and using the right tools you could have them all communicating between them. This way scaling is way easier, and maintaining the code even more.
Id recommend you read a bit more on JavaScript frameworks and microservices. There's a free course at Udacity on microservices using docker and kubernetes that I know will be extremely helpful. Link here
For front end JavaScript frameworks there's a ton of resources out there. Try CodeSchool free courses or codeacademy's.

Related

Adding concurrent editing support in drawing tool in a React + Spring Boot + Mysql application

I am working on a web application with a front-end built using React-Redux and a backend built using Spring Boot + Mysql + Redis. Basically, in order to do any operation, the front-end makes an API call.
Here we have developed an in-house drawing library using React-Redux and this drawing library is used in my app. Now, the requirement is to support concurrent editing of a diagram in our web app.
In this context, I have found several articles:
How conflicts are resolved in Collaborative Editing software that utilizes Operational Transformations
https://medium.com/pictet-technologies-blog/build-a-collaborative-web-application-using-reactive-programming-b6d6b8c9aef4
But, I have not found any concrete idea regarding how to achieve this in my application.
Could anyone please give some pointers regarding this? Thanks.
You can use websocket to synchronize data between the different users.
This tuto can help.

when to use moustache.js or backbone.js

I'm wondering when it is useful to use moustache.js (or something similar which do js templating), and when I can use backbone.js (which uses js templating inside it)
I've a web app with multiple pages, a json app, and the pages data are loaded via api calls, so I've tought about using moustache to clean up the rendering, but I'm wondering if backbone will improve something in my case
As already mentioned, they do serve completely difference purposes. Moustache being a templating engine, and Backbone bringing the MVC paradigm to Javascript. To quote from the Backbone homepage
When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. For rich client-side applications, a more structured approach is often helpful.
So, if you find yourself writing a load of DOM manipulation calls etc. Or you simply prefer a structured approach to your code - you will find Backbone a godsend.
It is of course possible to use other templating solutions (other than the one bundled with Underscore) and integrate it into a client-side application created with Backbone.
Both cam be use together,
To build web application architecture you can use backbonejs.
and to render templates you can use mustachejs.
First of study basic knowledge about both.
You will well understand when to use what.

Starting up a node.js project

I'm about to start a project that's going to be a web site for storing photos. The method for uploading shall be drag and drop (from the desktop, same as Imgur), and it shall be possible to rate the photos as well commenting them.
For the project I'm going to use Node.js as well as HTML5, CSS3 and jQuery. The thing is that I'm a total newbie on Node.js and really could use some help regarding getting started. For the project I will of course need a database, and I have understood that MongoDB is a good choice. Is there any templates for this combination, so that I don't need to start from scratch?
I have installed Node.js and followed some tutorials but I really feel that I want to a template if there is one.
Thanks in advance!
As you said you are a beginner you can take the best independent modules for your project and start using. Instead of having a pre-defined package of necessary components as a single module. Problem is you may end up not understanding the whole pack and become more biased.
So,
I would suggest to use Expressjs (Best Choice) for url routing as mentioned above.
And,
File upload management:
formidable - a high performance file upload server with file parts reading and progress notifiers etc.
Template Engine (Markup libs for your custom htmls):
Jade
coffeekup
And consider Bootstrap as well for prebuilt templates if in case you need it.
Mongo - Good choice.
Mongo Modules
These libs should help.
Take a look at HTML5 Boilerplate + Express.js
As a basic starting point, this is a popular framework:
http://expressjs.com/
Here you will find some links to example applications:
Node.js Web Application examples/tutorials
https://github.com/heroku/facebook-template-nodejs
Open Source Node.js (and Express) projects
Express JS is good but I would recommend you have a look at Railway JS as well.
It is based on Express with support for numerous template engines and database adapters (including MongoDB). It is a lot more modular so you should not have much trouble working with it (in my opinion).
Check out: Uploading images using Node.js, Express, and Mongoose too.
Here is a list of resources that I have compiled using themeefy to start a node.js project http://www.themeefy.com/AvinashEga2/nodejs
I think Tower.js is something like what you're after.

Rails or node.js for Restful API

I have an existing website written in ASP.net, I have recently switched to Mac full time (With Windows in Boot Camp), and need to write a public API for accessing my website's MySQL data. I primarily want to use the API to allow building an iOS application.
I am interested in learning either Ruby on Rails or Node.js, I haven't used either of them yet.
Which language would be better for me to learn?
Rails is a relatively mature web framework based in Ruby and is designed for handling object-mapped data persistence in a relational database backend.
Node.js is much newer on the scene, and unlike Rails, is a more bare-bones package that allows for server-side Javascript applications thanks to a pretty tight HTTP(S) API. Node applications are by nature event-driven, which may or may not be ideal for your application.
Since it seems that you'll need data-persistence (you mentioned accessing MySQL data...), Rails might be easier to get started with, as it comes packaged with all the things you need in this respect and is designed to facilitate this sort of application.
If you you don't really need relational data persistence, Node is probably a better bet as it stays out of your way and lets you decide how to handle things. It's important to note that Node is a much more bare-bones "framework" than Rails -- if you want something slightly higher-level but still lighter than Rails that runs on Node, express is good place to start.
Still, if you want to try Node (I will confess: it's a lot of fun!), it's totally possible to access MySQL in a nice, event-driven (non-blocking) way. Here are two modules that will be helpful:
node-dbslayer
node-mysql
Neither is a language; they're frameworks. There is no "better", there may be a "more suitable" (probably not in this case).
Which would you prefer to develop in, Ruby (Rails), or JavaScript (node.js)?
Would you like to transfer that knowledge to a different job without rampup time (Rails)?
Would you like to learn something a bit more esoteric, event-driven (node.js)? (Ruby has Event Machine, but IMO node.js takes it a bit further.)
So this new application is just a middle man between your ASP.NET thing and your other clients.
In that case, totally use node. Node is great at being networking glue. Node scales great with IO bound applications (i.e. being a network middleman).
If you're going to use node then you probably want to look at express to make it easier.

fastest public web app framework for quick DB apps?

I'd like to pick up a new tech for my toolbox - something for rapid prototyping of web apps. Brief requirements:
public access (not hosted on my machine) - like Google's appengine, etc
no tricky configuration necessary to build a simple web app host
DB access (small storage provided) including some kind of SQLish query language
easy front end HTML templating
ability to access as a JSON service
C# or Java,PHP or Python - or a fun new language to learn is OK
free!
An example app, very simple: render an AJAXy editable (add/delete/edit/drag) list of rich-data list items via some template language, so I can quickly mock up a UI for a client. ie. I can do most of the work client-side, but need convenient back end to handle the permanent storage. (In fact I suppose it doesn't even need HTML templating if I can directly access a DB via AJAX calls.)
I realize this is a bit vague but am wondering if anyone has recommendations. A Rails host might be best for this (but probably not free) or maybe App Engine, or some other choice I'm not aware of? I've been doing everything with heavyweight servers (ASP.NET etc) for so long that I'm just not up on the latest...
Thanks - I'll follow up on comments if this isn't clear enough :)
C# or Java,PHP or Python - or a fun new language to learn is OK
How 'bout Javascript? This place hosts server-side Javascript ticking most of your other boxes. So you can use the same language for client- and server-side stuff (which I find very handy). [Caveat: I only played with their service; seemed cool though. I use Javascript on the server-side on IIS and on Tomcat (via Rhino).]
For something bleeding edge - A new version of spring roo was released recently. With it you can create a great web app in 10 minutes. Supports GAE and GWT...
http://www.springsource.org/roo
xataface is a quick way to make a front end for a MySQL database.
It makes it easy to start an app quickly with dynamically created views and then you can change it to something very customized to your needs.
It simply needs a server service with MySQL and PHP.