I want to have achieve something similar to Java Tiles framework using only client side technologies (no server side includes).
I would like to have one page, eg layout.html which will contain layout definition. Content placeholder in that page would be empty #content div tag.
I would like to have different content injected on that page based on url. Something like layout.html?content=main or layout.html?content=edit will display page with content replaced with main.html or edit.html.
The goal is to avoid duplicating code, even for layout, and to compose pages without server-side templating.
What approach would you suggest?
EDIT: I don't need a full templating library, just a way to compose a pages, similar for what tiles do.
JavaScriptMVC has a view templating system that supports different engines, including a pure JavaScript based one called EJS.
You might also want to look into Mustache especially Mustache for JavaScript.
If you would like to use jQuery, there is a decent templating engine in development as well:
http://github.com/jquery/jquery-tmpl
http://api.jquery.com/jquery.tmpl/
Check this out:
http://layout.jquery-dev.net/
I thinks it's close to what you want.
I am looking at javascriptMVC at the same time.
In the forum they are talking about using jquery layout with it.
I don't know if it fit exactly to what you want to do, but using the GWT seems to be a good approach for rich client-side applications :
You write all your application in Java with the framework, and you compile for obtain HTML and JS files working stand-alone.
Related
Is there a method available to make maintaining the common sections in html templates (e.g. header and footer) easier?
I am trying to explore a javascript multi-page app.
In PHP, my approach for better code maintenance is to use require_once(path/to/header) and simply adjust the code in path/to/header, no need to update all pages that use the header.
Is there a similar method for that to maintain html templates? I know this can be achieved in javascript, but I was thinking of a non-dynamic method for this, for search crawlability sake. Although I have read that google can crawl javascript apps, I decided not to make the app 100% javascript generated, I want to maintain the few common sections as static html.
Anyway, what is a common approach for this scenario? Is there a compiler or something? Because right now I am thinking to build the pages in PHP and then just get the html ouput when I move the code out of development.
Any suggestions?
Search: javascript html template engines:
https://colorlib.com/wp/top-templating-engines-for-javascript/
Eg.
pug
ejs
Handlebars
I made a website with HTML, CSS and Javascript without using a CMS, so it's all kind of static. I've been asked to make this project into a multi language website (the current language and English). Now I am looking for a good way to implement all the translations.
I've seen a simple solution with i18next using client-side Javascript, but I'm wondering if this isn't harmful for SEO (the url doesn't change when selecting another language) and if there is a better solution for this.
https://github.com/dwkns/i18next-translation-tutorial
Hidden content may not be read by the search engines. It's better to have two versions of entire site in subfolders.
If you really want to do it with javascript, try to put both content visible in html (users with no javascript should see both) and then with javascript hide one of them after page loading. But i suggest the first approach, it's more realiable.
source about google do this: https://www.freshegg.co.uk/blog/technical-seo/google/how-does-google-treat-hidden-content
No issue with that. Google and other search engines run javascript as user browsers. Just add some links so google could discover the pages in other language (not only have autodetection)
The only drawback you have currently are routes are not translated but that could be solved, eg. https://github.com/i18next/i18next-express-middleware#add-localized-routes
I currently have an application that loads the html header, navigation, and footer information into an html page using separate php includes.
I am trying to re-design the application so that it no longer is dependent upon php includes (so that I can port it to PhoneGap). I have been scouring for a solution that would allow me to get the same templating functionality, while shifting the php scripts solely to the server.
I have looked at a number of the Javascript Template Frameworks - ractive, moustache, handlebars, etc. But most of those seem only data focused - which is great for that purpose, and I may use one for later. But I am looking for something to provide the bones, not the attributes. Also, each of those seems to have routing/url/seo limitations.
I have also tried some of the frameworks like Meteor, Ember, Express, and Sails but they will require a lot of additional coding to get to the same functionality I currently have - but they have the ability to define application level templating/includes. Slim Framework seems to be closest (and maybe coupling it with Twig ), but before I commit I wanted to get some feedback/option.
Is there a better way to do this?? And if so with what? And maybe even how?? Thanks all in advance for your feedback!
After looking through a number of the solutions, I feel that using jquery with handlebars. will actually be the best solution. It does not allow me to do exactly what I'd like to do, but it is close.
I will keep the module pages as separate html files in a templates folder and then inject the moustache modules into the container page using jquery ajax and/or .load.
I have two HTML files: One acts as a template, supplying the navigation, sidebars, etc., and the other has the main content. I'm trying to figure out how best to insert the content into the template. I need persistent URLs, so my plan was to have the content page essentially replace itself with the template, plugging the text back into the resulting page. I'm really new to front-end programming and I'm suspicious that this may be an anti-pattern, so my first question is about whether I'm barking up the right tree. The problem seems universal, and I'm sure there must be a best practice, though I haven't yet seen it discussed. If this is an acceptable way to proceed, then what JavaScript function would allow me to access the HTML of two different pages at the same time?
[EDIT: It's a small page on GitHub]
Do not do this. At current implementation HTML is not designed to be template engine. You can use HTML import but it has not full support in browsers. (compatibility table).
Usually this problem can be solved with:
Use frontend framework. Libraries like angular.js or polymer.js (and so on) usually has support of importing HTML documents in different forms.
Build your application HTML. Task runners like grunt.js usually has plugin that includes HTML.
Use server side technologies to extend your HTML from base layouts
If your application have to be consisted from different HTMLs I recommend you to try polymer. It is polyfill for web components and designed to work in such way by default.
UPD:
About edit to your question. It seems like you just need template engine for HTML. You can google for it. I use nunjucks - javascript port of python's template engine jinja2. It is lightweight, simple and can be compiled right in browser.
Another way is to use special tools for building static web pages. You have mentioned that your page is blog build from simple HTML pages. Try to use pelican. It is the static websites (blogs) generator. It is simple and fast. You can build your HTML even on your local machine and just push your HTML pages to github.
Very basic question: I am coding a web app that has a handful of pages. These pages have the usual shared elements: eg, the site's header/masthead and a side-bar are present on all pages. The HTML is static (not dynamically generated, its "ajaxy-ness" is done client-side).
What is the best way of importing/"including" those common elements into my pages? The solution I am using is to have the HTML files contain empty place-holders
<div id="header"></div>
<div id="leftSideBar"></div>
(...)
and then do in jquery's $(document).ready():
$.get("header.html", function(html) { $("#header").html(html); });
// ....
Is this the best way to do this? I'm new to web development. : )
I guess I could also dig up a "macro-like" code-generation tool that I would run on the HTML files to replace, eg, "#header" with the contents of header.html. That way loading a page would require a single request for a single HTML file, which sounds better.
What is the smart way to achieve this? I am sure this problem has been solved a thousand times.
EDIT: The server-side is coded in Python+cherrypy. (I am assuming it is reasonable to try to keep away from dynamically generating HTML when doing "web 2.0-ish" web apps. Please correct me if I am wrong. As I said, I am very new to this environment.)
Thank you for your insights,
lara
If you want to include files, please consider using some backend language such as PHP or ASP. Javascript is not really meant to do this even if this would work.
<?php include 'other_file.php'; ?>
Using javascript to do this will lead, I think, to a poor SEO and the loading of the page might look weird for the end user. If you really don't want to use a backend language, some IDE have a way to handle templates, you could look into that.
Concerning frameworks, most of them have a way to handle templates. ASP.NET has the master page system, Ruby on Rails has layouts.
Here's an example using Rails :
<html>
...
<div id="content"> <%= yield %> </div>
...
</html>
Here all the content of a subpage will go into the "yield". Here's a link to learn more about that.
Some frameworks can handle multiple place holders.
To some extent, it depends on what you're using on the server side to render the pages. If your using server side scripts to generate the page you should be able to use a web framework (eg. Django or RubyOnRails) or even just a basic templating engine such as Genshi. Basic include functionality may even be built into the language you're using (ie. PHP)
If it's just static HTML you may want to look into setting up some form of server side includes such as Apache SSI or NGINX SSI. You'll need to pick the one that works with whichever server you're using, and you'll need enough access to install and configure the plugin or module.
Alternatively, you might want to look at using a script to generate your pages (edit, generate and deploy). A simple approach using cat / sed / awk / make (additional useful reference - Sed & Awk) may be all you need, or you might want to use a templating engine and a language such as Python or Perl.
I'd have the includes handled server-side, and this will mean fewer requests from the client, and may also have other benefits (easier to debug js, etc).
Having the server process includes really isn't going to put a major strain on it.