So i am trying to create a website with multiple different pages. I was originally going to just take the traditional route but this website caught my eye: https://anyoneworldwide.com/
Everything aside from the "Choose your location" screen has no loading whatsoever. The URL changes but there is no loading indicator on my tab or "X" on the refresh button (I am using chrome btw)
So my question is; how am I able to use this kind loading technique in a website of my own?
The particular website mentioned in the question is developed using React. Its a javascript framework.The concept is know as Single Page Application. Where routing is done by javascript running in the browser and content is loaded using ajax calls. checkout this article.
Easy answer, pick one of the currently popular front end frameworks for building single page apps (SPA).
E.g. AngularJs, React.js, vue.js
These frameworks allow you to easily create client side routers, which inject (in one way or another) new content into the existing page, thus no refresh.
React is a popular open source and free library developed by facebook. It is used to develop single page applications which means that your website wont load at all. This increased the speed of your website and saves a lot of bandwidth. Using react you can make such a website as you mentioned. Not only React but also other frameworks like angular and Vuejs can be used.
Related
Trying to make a react app using pre made sources. I have a fully functional web page made in vanila js. Is the best approach (or maybe the only one) to turn the html page into multiple react components and just delete the html page or should I maybe find a way to just implement react code into html?
Why write 5 times the same button when you can write it once and import it the rest 4 times? This assures a unified look on your site and that any minor change you make will be reflected in all the proper places.
Consider a testimonial slider. You want this in your home page and in your about page. Why have the need to update it in two places?
If you are going the React way I will suggest to go all the way. Componetize your site, see the true power of React. Maybe its an overkill for your site (every component appears once -doubt-) but if this is the case you will start learning a really powerful tool with a simple example and the progressively get better.
Now I have a requirement to convert the different web pages into a hybrid application. The developer have to spend a lots of time to do the task as it is in different type of styles and standards. To overcome this productivity issue I planned to use iFrame so that we no need to change anything in the HTML pages.
Now the question is, if I use iFrame in hybrid application then is it cause anything or any performances issues occur.
I Googled about this iframe things but many of them are not suggesting to use iframe on web but I am not sure about the Hybrid application.
Thanks in advance!
-Murali Krishnan
I am not sure why you would want to use an iframe. Within a hybrid app you can load the webpage of you already have as a webview. Hence that is already the web page loaded. Please correct me if I have misunderstood you.
Consider your page is located at http://example.com. You can load the hybrid app's webview with the webview pointing to http://example.com. Therefore, you already have your webpage loaded within the app and there would not be a necessity of iframe.
Using the hybrid app approach you would also be able to use the native features available with the mobile device to improve the functionality of your webpage.
In the performance point of view, using iframe within the webview (though never necessary) of the hybrid app will definitely reduce the performance of the app.
I am newbie to Jquery Mobile, so far what ever examples i searched contains only one html page for whole application, with multipe div tags where each page/screen is defined as div tag with data-role as page with some header and footers optionally. Based on user actions, we are hiding some div's(pages) and showing only expected page. Also, this multi-page template seems to be standard design, as written by some blogs. Are there any other designing ways? what I would like to have is multipe html pages, for ex one for login, one for home, one for contact etc. Other wise it is difficult to understand/code/debug issues, especially people from Java background like me.So, what I want is some kind of MVC design with JQueryMobile, like each view/screen as sepearate html associated with one js (Controller). Can we have multiple html pages in JqueryMobile app? If possible how to pass data/ maintain session between them? Any samples are most welcome. Thanks In Advance.
Note: Also I don't want server side includes, may app contains 10 to 15 screens, each page will make a webservice call and fetch some data and map it to UI.
As jerone mentioned above, the jQuery Mobile documentation clearly says
We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.
See http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html
Each page (which can be a static HTML file or anything produced by a script (e.g PHP, Python or whatever)) is thus standalone and transitions from one page to another are done using AJAX calls.
There is no such thing as a controller except if you assume that your browser is one!
You can use multiple html files if you want. jQuery Mobile will automatic include these with AJAX: http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html
Anyways, jQuery Mobile recommends one big html file with multiple pages.
From http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html
This template is standard HTML document with a single "page" container inside, unlike a multi-page template that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.
I've started learning ExtJS 4 and Sencha Touch 2, and i really like it.
The main difference between Sencha products and jQuery(& others) is that instead of enhancing preexisting HTML, it generates its own DOM based on objects created in JavaScript.
Apps developed like this are great as intranet apps, but can you create a consumer oriented website using Sencha?(like an online store)
I see that you don't write any HTML code in ExtJS or Sencha Touch so i am wondering how can fully generated Javascript page be indexed by Search Engines like Google. As i know, the Google Bot only sees the plain HTML code.
Is there anyway to SEO a Sencha WebApp?
Kind Regards,
Dan Cearnau
Nothing is impossible. You just need to do some work.
1. Generate standard static page using PHP or smth else. The page should look like the page of your ExtJS app. But all links must have GET params in URL. Also PHP should aggregate input GET params.
2. Add your ExtJS app to the page. In the app you have to take into an account GET params and make proper request.
2a. If a real user opens your page: PHP generates the output, then ExtJS app starts and hides the static page and generates the dynamic output.
2b. If a crawler opens your page so JS is disabled, PHP aggregates the request according to GET params and generates the output.
You can add params to URL like #param1¶m2¶m3 in ExtJS when clicking on links, so real users will be able to share their links. Just learn the router on PHP-side to understand URLs like this.
There is no way to make SEO-friendly pages using JavaScript only.
Using a full blown app it would be close to impossible to SEO. They are far too dynamic. Search engines work of indexing pages. They can deal with some Ajax stuff by supporting pages with #s but imagine how many pages a fully functional app will have. Every view you have has 100s of options that would constitute a new page, which also has 100s of options. All these virtual pages would most likely be just slight variations from other pages. different sort order, different filter, moved panel, search option.
If you use ExtJs to enhance a website like jQuery is often used, then that's a different story. You will have html for the spiders to read and then you enhance how the content works via javascript (see progressive enhancement).
Actually in Touch 2 you can define paths and use history support. This will treat sections of your app as actual pages in the browser w/ standard functionality like going back in the browser etc... this will be your best bet when working with mobile SEO
Getting any kind of SEO out of a Sencha app is impossible since it builds everything on the fly. Even if you use the history support in Sencha Touch, thats also done on the fly and has no effect on SEO.
For consumer-facing websites, Sencha is not the answer. For back-end (for maybe managing the shopping cart), its a different story.
Last time I coded a web application was almost 10 years ago. I used Java/JSP/HTML/CSS etc. I've been coding non-web applications only ever since.
When I look at modern sites now (like this one), I realize how my web development skills are obsolete. Maybe the most obvious "feature" that I wouldn't know how to implement now is the update of elements on the page after user input without having to refresh the whole page (e.g. the voting/downvoting here updates the vote count without reloading the whole page). What are the basic technologies behind this?
The techniques come under the umbrella of AJAX:
Ajax (shorthand for asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.
Something you should know:
DHTML : HTML Document
structure,document event;
JAVASCRIPT: use javascript to operate the HTML document;
AJAX: use javascript to communicate with the server.