templating in nodejs confused about several things - javascript

When it comes to templating my understanding is that you can do several things:
Serve static pages.
Pre Compile everything (jade to html) once and then serve the same thing to all.
At every request render everything and then serve.
Render static parts ahead of time (when app starts) and render dynamic parts at request.
Serve vanilla html and render dynamic part at request.
Send vanilla html + template and library(engine) and render at client.
What i want to do is number 5 and if not then 4. I don't want to rewrite all html, css etc. For the sake of just templating. I want to stick to html. But for part that needs to be dynamic i'd like templating. However if in case that this is not possible. I'd like to be able at least precompile the static part of the page and then compile user specific (dynamic) part at request.
I was looking into jade, but i can't figure out how would i do that? Is there a way, there should be, that i can type jade within html so only parts are dynamic are done in jade. I was told to compile jade, then append it to vanilla html. This is not ok. Because it requires me manually piece together html which isn't viable solution if you have lots of html and pages.
I hope everything is clear..if not leave a comment.

Related

method to maintain common sections in .html templates (e.g. header, footer, etc.)

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

Grabbing HTML from another page

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.

Include html files in an html file on a local file system?

I have a help system that is completely offline, no server, using file://.
I have one main page, with hundreds of line of html that represent many sections of the help system. I would like to stick each section in a html file and just include it. Unfortunately it seems like this is only possible with some nifty server side include techniques, with HTML5 (which I do not want to assume my users have), or with a nasty javascript hack where you copy your html file into js files with document.write calls for every line as written about here: Ways to include html in html.
What about something like handlebars.js or mustache.js? Can I use templating?
Since you don't want to use server-side includes, I would suggest using a static site generator (SSG).
If you are not familiar with SSG's, they allow you generate HTML pages from templates & includes (often Handlebars templates) and HTML, Markdown, JSON, or YAML, content using a CLI.
If you want to get started with an SSG, there are plenty of options, from Ruby based Jekyll, or Node.js based Assemble. In my opinion, Assemble is the best option and I would highly recommend it.

Shared Rails and JavaScript views

I'm a little confused as to why this isn't a more commonly addressed problem but here goes.
I have my Rails app which generates my views normally.
I have some dynamic content on the interface.
I want to make an AJAX call, return JSON, and populate the dynamic portions of the application. I would use a JS templating library to do this.
I DON'T want to make an AJAX call, have Rails process the view and send all the HTML back. I want the response to be JSON so cut down on processing and wire time.
The problem is that the HTML I'm generating dynamically is the same HTML I'm generating statically on page load by Rails (think AJAX pagination). The HTML is naturally in my ERB files. But when I generate more content (say, page 2), I obviously can't access the ERB files and need to duplicate the HTML in a JavaScript template file.
Is there a solution out there which allows me to share my views between Rails and JS? (I understand it's a little awkward to try to mix ERB with JS rendering...loops, conditionals, etc)
Do people usually settle for rendering HTML and sending it over the wire? Or, do they awkwardly execute JavaScript upon page load to render using JS templates?
I ran into the same problem in the past. I was able to solve it with Mustache: http://mustache.github.com/ At the time there was no easy way to setup mustache with rails so I had to code something together. It looks like now there is a lib for it here: https://github.com/goodmike/mustache_rails3
Update:
Looks like there is a nice gem now to accomplish it called stache: https://github.com/agoragames/stache

how do I share configuration data between Javascript, Python, and CSS in my Django app?

I have Javascript, Django templates, Python code, and CSS which all work with the same configuration data. Where's the best place to configure it?
Specifically, I have a browser-side entry widget in Javascript which controls an embedded Java app. When the user is done, the Javascript asks the Java applet for an image of the result, which will be embeded in the HTML. The user can specify if the image should be small, medium, or large. That image and the choice are sent via an AJAX call to my Django app, which does some input validation. When the HTML is displayed it includes my CSS, which has special a[href^=http://internal.server] markup to show those images in a different way than other images.
While someone asked a similar question, the answers were either: "use a DSL" or "use a format like XML or JSON." Neither of which work with CSS.
The two solutions I came up with are:
put the data in Python and have it generate the HTML through a Django form/template. Also have Django dynamically generate the Javascript configuration and generate that CSS.
I don't like this because I would rather serve all my Javascript and CSS statically.
Introduce a build step where configuration data gets applied to a template to build the respective Javascript, HTML, CSS, and Python files.
Which makes things more complicated because I'll have special "*.in" or such files which build the actual files, and everyone will have to watch out that they know which files are the ones to edit.
What do you do?
Use JSON. Generate the CSS dynamically, using caching to reduce load.
I think an really good approach would be to effectively have a DSL expressed indirectly via JSON data structures laid out using some sort of coding convention, coupled with a separate build step that used that to create the configuration files needed. If the tool(s) for this build step were written in Python, creating, maintaining, and enhancing it or them ought to be relatively easy.

Categories