I'm building a mobile version for my website using Jquery Mobile API.
The framework provides automate AJAX navigation processing. But as far as i know it require "real" pages for loading purpose.
What i want to do is override the automate navigation process of it and process the hashchange on my own. But i can't not rewrite the url using window.hashChange, which is running well on my non-mobile website version :
$(function () {
$(window).off().hashchange(function () {
if (location.hash.length > 1) {
PageSelect();
}
});
$(window).hashchange();
});
I just only want to take advantage on jquery mobile interfaces, i don't want anything with its automate ajax navigation stuff !
I tried to disable it using ajaxEnabled() but got no luck.
Related
I've seen prerender.io is a solution based on phantom.js while paypal's react-engine seems lighter solution. I need to decide which one to use.
What is the advantages of prerender.io over react-engine ?
for SPA and no SPA.
If you're building an isomorphic react application, then react-engine or your own way of rendering the initial page is more than enough.
In case you're okay to go with a paid service like prerender.io, then it will do the same using headless webkit browser such as phantom.js. Prerender.io opens the webpage in a headless webkit browser such as phantomjs and returns the rendered HTML to the search engines. In the process, it caches the rendered HTML. So subsequent requests would be served faster. It's useful for almost all SPA applications built using AngularJS, Backbone, etc.
But for react, I would consider it to be an overkill and also paid service is not required when you could do it easily. React provides you API to render the Component in the server easily using React.renderToString and React. renderComponentToStaticMarkup
Very simple approach looks like below:
Router.run(routes, url , function(Handler, routerState) {
var handlerElement = React.createElement(Handler);
var html = React.renderToString(handlerElement);
res.send(html);
});
It's just a snippet from an isomorphic app which i've built recently.
You could refer ConMAN an isomorphic reactjs app which I've built using the following tech stack: Koa, React, React-router, Flux Architecture and Browserify.
Keep in mind that isomorphic architecture in React apps adds some complexity, compare these two projects for example (disclaimer: I'm the author):
https://github.com/kriasoft/react-starter-kit - Isomorphic React app
https://github.com/kriasoft/react-static-boilerplate - Single-page React app (SPA)
I was thinking in doing a full SPA application with AngularJS that would download all the views code on the initial request and then just communicate with the server through AJAX requests.
The big advantage is that it would look like the application is running locally.
The disadvantage is that maybe on the initial request the application would take maybe 2 minutes to load because it would make about 40 page requests to the server.
Isn't there a way to download all the application views in a single request like using some kind of ASP.Net MVC bundles?
I did something similar. I'm using Asp.net MVC & WebApi with AngularJS.
My first request is to an MVC Action -> It returns a kind of master page(including bundles).
When the page gets down to the client, AngularJS kicks in and gets in charge.
Now my template views are also rendered via the Razor view engine(since I needed a special in house engine to locate my relevat templates) - I can use bundles and other .net stuff inside instead of fetching plain html.
Now using templates this way can be BAD.
I put red lines about what I want the Razor view engine to do in the process. It's easy to misuse AngularJS when you use Razor views\templates in your project.
you could use the $templateCache service to download multiple views at once. In the run phase you define them all (of some of them).
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('template1.html', 'This is the content of the template 1');
$templateCache.put('template2.html', 'This is the content of the template 2');
$templateCache.put('template3.html', 'This is the content of the template 3');
});
Is it possible to use ionic frameowork for regular Web Applications rather than wrapping it in Cordova?
This is possible if you include the components of www/lib/ - This folder contains the core of ionic(the ionic framework + angularjs) and you can proceed from there.
However it's important to note that ionic was built on top of angularjs, specifically with mobile in mind. To get better results for web app development, you should consider using core angularjs(for functionality) and bootstrap3 (for UI).
V2
Ionic now supports PWA(web apps) and support for desktop is coming too soon
Ionic build browser
V1
Ionic can be used for regular web development. If all you need is web dev stop here. But if you want your app & web to serve from the same codebase read further
Step 1
Create a copy of index.html inside merges/browser/ (merges is at the root level i.e myApp)
include
<script>
var is_browser = true
</script>
&
<body ng-app="myApp" class="platform-website">
Step 2
Remove unnecessary js files like cordova.js from index.html
Step 3
add in app.js
var is_app = (typeof is_browser === 'undefined' && !ionic.Platform.is('browser')
&& ionic.Platform.isWebView());
Now use css hide/show or angular hide/show using these
While I don't believe there is much support for anything but hybrid web apps in Ionic, you can check out Mobile Angular UI for a very similar alternative with support for the mobile web.
Orane is right.
When You "node app.js" your app runs a server. We need to provide this server with all files we want. With Ionic Application it's basically www folder. In following example i put all contents of www folder to my public folder.
My root folder has app.js file and public folder. That's how app.js looks like:
var express = require('express');
var app = express();
var server = require('http').createServer(app);
app.get('/', function (request, response) {
response.sendFile(__dirname + "/public/index.html");
});
app.use(express.static(__dirname, 'public'));
In public folder i have all frontend css and js. We included the whole folder public in code above. Now in index.html of public You should include files with public/, like this:
<script src="public/lalala.js"></script>
All the best, anybody, feel free to ask anything about Node.js+Ionic Framework
Depending on the complexity of the app it is absolutely possible to use the Ionic Framework for regular web applications!
When you create your app there is a /www folder that contains all your HTML, JS, and CSS. That's the front end for your web app.
Most web apps are simple interfaces that access data with only a little bit of logic in between. In most cases you can put that logic in your JS and let the clients handle the workload.
Data can be handled by a Backend-as-a-Service (BaaS) solution like Firebase or Parse. I like Firebase because it ties in nicely with Angular and Ionic.
If you need to connect to services that require secrecy, like credit card payments, you can hook in to a service like Zapier.
For hosting there are a number of static app hosters that have popped up specifically for serverless apps. I prefer divshot even though they don't seem to be actively pushing out new features anymore.
The solutions I've outlined here will help you maintain the consistency across platforms that makes Ionic great!
Our choice for hybrid mobile apps is the ionic framework, however for the web applications front-end part is not in the ionic framework.
For example, we do web application part in pure Angular or Kendo UI for Angular AngularJS UI.
It is more efficient when the same team can be productive on both platforms (mobile and web).
Hope it helps.
I am planning to develop my monitoring/dashboard pages for hardware devices like Cisco router/switch/controller using Angular JS Library.
My page contains graphs(line & area), Google maps, tables and some blocks (div with value)
Is it feasible to use Angular for monitoring data?
What are the advantages we can get by using Angular? since it is only monitoring we don't have to use 2 way binding.
I am looking for few points to justify why we need angularJS for monitoring/dashboard kind of pages rather than JQuery/Javascript.
Please let me know your thoughts and comments.
Thanks.
Using AngularJS is totally feasible.
Main advantages is that charts can be implemented as reusable components (AngularJS directives).
There is a project in development that allows building dashboard from arbitrary directives
Running Demo http://nickholub.github.io/angular-dashboard-app
Demo source code https://github.com/nickholub/angular-dashboard-app
Dashboard directive itself https://github.com/nickholub/angular-ui-dashboard
And here is example of visualizing data coming from WebSocket
https://github.com/nickholub/angular-real-time-charts
If your site is 100% static - and by that I mean that you do a request for a status page, and the page you get will never change before you do a new request - then angular might be a little unnecessary.
But if you want your status page to 'live', you could use socket.io to push new events and data to the client and let angular take care of the ui refresh.
There are some angular directives to work with graphs, but I have no experience using them.
Some pointers:
Node.js + socket.io + angular.js:
http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/
angular.js + charts: http://ngmodules.org/tags/charts
I will be glad if someone could answer the following questions
How does it work?
Why is it necessary?
What does it improve?
Client side routing is the same as server side routing, but it's ran in the browser.
In a typical web application you have several pages which map into different URLs, and each of the pages has some logic and a template which is then rendered.
Client-side routing simply runs this process in the browser, using JavaScript for the logic and some JS based template engine or other such approaches to render the pages.
Typically it's used in single page applications, where the server-side code is primarily used to provide a RESTful API the client-side code uses via Ajax.
I was trying to build a Single page application and came to know about client side routing.
By implementing client side routing I was able to achieve the following
The front and back buttons in the browser started working for my single page JavaScript application. This was very important while accessing the page from a mobile browser.
The user was able to Bookmark/share a URL which was not possible earlier.
I know that it's late but I have some information about how the client side routing (CSR) works. This answer does not try to provide a full js implementation of client side routing but rather tries to shed some light on what concepts will help you implement one of your own. It's true that when user click an anchor tag, the browser sends a request to the server. But we will be able to intercept the event and prevent it's default behavior, i.e sending a request to the server by using "event.preventDefault();". Below is snippet from React routers web page.
<a
href="/contact"
onClick={event => {
// stop the browser from changing the URL and requesting the new document
event.preventDefault();
// push an entry into the browser history stack and change the URL
window.history.pushState({}, undefined, "/contact");
}}
/>
Also listening to forward/backward button click is important. This can be done by,
window.addEventListener("popstate", () => {
// URL changed!
});
But looking at the above two snippets you can imagine how a CSR could be implemented. There is much more to it. That's why libraries like React Router exists and web frameworks like angular provide CSR by default.
If you want more information please visit the link below, it will take your the concepts page of react router.
https://reactrouter.com/docs/en/v6/getting-started/concepts
Also if you want to get more depth into the topic your could check out the code of Angular router. Comparing the two implementations will give a much more insight.
What :
In react the history object takes care of that what it does..it keeps track of all the addresses and the Router defines all the different routes. So Router takes the help of this History object to keep a track of various addresses / History of the current URL and based on that location it serves the appropriate content.
Why :
To reduce unnecessary reloads.
For better user experience.
It's internally handled by JS.