How can I make a handler deliver HTML (using hamlet), whithout wrapping it inside defaultLayout?? They will have as root a div tag, not something inside a whole html tag. Such way should also consider internationalization.
Using Angular with Yesod works well because angular templating happens inside valid html that hamlet can generate.
Besides the current comment answer you might consider including a lot of templates using script tags inside a layout. I have done this before where there was a front page layout, an app layout, and an admin layout.
Related
I want to have Web Components hosted by one site, which another site cannot access the inner DOM or Javascript of. Exactly like with iframes, but which can be rendered inside the HTML better, for example sizing to incorporate their content etc.
There have been many discussions about this but in 2019 when I ask this, is anything implemented to do this?
EDIT: Let me be totally clear - I want the JS for the component to be served from our servers, requests to our server to be done from the component’s JS, render stuff in the component, but not let the enclosing site get it or put a trojan horse in the component. I am fine w the encloing site providing CSS but no HTML or JS. Can this be done?
How would it communicate with the component, analogous to postMessage?
Finally, is it possible for the COMPONENTS JS to access the outer containing website’s DOM and thereby find other components and communicate? This last one ain’t possible with iframes on another domain.
Simple answer: No.
Web Components Do not isolate JS. Just DOM and CSS.
But you can put all of your JS within your class, or in an ES6 Module, or in an IIFE and that would isolate it.
But I doubt that Web Components will ever be a 100% replacement for <iframe>. Nor do I think they were meant to be such.
I would not be surprised if the <iframe> were to become deprecated and eventually removed from browsers.
UPDATE
Keeping ALL of the JS code inside your component's class or inside an IIFE will somewhat protect the code. The HTML and CSS are already sand-boxed inside the component. If your code was in an IIFE or in an ES6 module then other code would have to have access to the source file and be able to modify it in order to change it.
Communication from the outside with the component is done by the outside code calling functions of the component or setting properties and attributes of the component.
Communication from the component to the outside is traditionally done by dispatching events. Talking directly from one component to another is a messy option and really should be avoided. It is up to the parent code to listen to events from all its children and then call functions or set properties/attributes on other children.
If you use shadowDOM then the enclosing site can only change the CSS of your components if you make certain aspects of the CSS available to them. This is done either with CSS Varaibles or by using <slot> to allow the enclosing app to place their own HTML/CSS inside your component. This could open you up to some things you may not want though.
The code that is in the class, or in an IIFE can always access anything in the DOM. Remember that JS is not sand-boxed and can do anything any other JS can do. But it is more difficult, though maybe not impossible, for the enclosing app to make changes to your component classes. Make sure your classes are frozen to prevent sub-classing.
One other thing to know is that if you have someone else loading their website from their server and then loading your component files from your server then you may have CORS problems. Especially if your code tries to load data using XHR/Fetch, then you may have CORS issues.
I recently started learning nodejs and now i am very confused between what to use for my web app, html or ejs (Express). Ejs uses the Express module whereas the .html uses the HTML module. My first question is, what are the differences between them if exact websites can be made from both. The second question, that extends from my first question is what should one use for a website that is to be uploaded to the cloud. .html or .ejs. I believe .ejs is dynamic (if statements can be used inside the file) therefore .ejs should be used. But, on the other hand, its the first time I am hearing this .ejs name, and I am uncertain as to what future it holds, whereas HTML has a build up name, and most developers and the market knows what it is.
Thanks in advance.
Ejs is a template engine.
It makes possible for you to load data from your application in the view.
After the template is rendered, it generates a .html file for the browser.
Answer 1: index.ejs allows you to execute JavaScript inside html element. For example: loop or perform arithmetic operation. index.html can't include JavaScript inside its elements.
Answer 2: of course, index.ejs will come to my mind first. If you learn php, it is the same. php developers use index.php instead of index.html
Answer 3: you don't have to worry, there are plenty of supports from JavaScript community today.
I am working on a POC on Node JS, and I learnt that a typical tech stack will look like - Jade (instead of HTML)/ NodeJS/ and some database. My question instead of Jade can we use HTML 5? This is to avoid learning one more language to complete the POC. Also I assume that I will be able to expose the Node JS methods as rest API instead of having PHP or Java layer.
More over if I use simple HTMl/JQuery - for UI and Node.js ( for restful service) it will be easy for one to migrate to other framework easily. Please share your experience.
This is more an opinionated question, so i would like to share my opinion.
My question instead of Jade can we use HTML 5?
Jade is not alternative of HTML5. Jade is a templating engine whereas HTML5 is not. So, both are different.
Getting back to your question, you can use HTML5 as well.
Role of Jade
Ex: Consider yourself in a scenario where after user login you need to display a profile page and in profile page You need to print 'Hello '.
Since is dynamic value, so it can't be hardcoded in HTML file. Therefore, you place a placeholder in HTML (since you have added placeholder and made your HTML file generic for all user, thats why such file is called template file instead of plain HTML file). Now you can fill the placeholder with dynamic value either on server side or on browser.
If you select to replace placeholder by their value on server side, you use some templating engines. Ex EJS, JADE etc. Templating engine are responsible for generating HTML from template
If you select to replace placeholder by their value on client side, then you can choose to opt Ajax calls and fill your placeholder using Jquery or Angular.js may be handy if your project is expected to be big enough.
if I use simple HTMl/JQuery - for UI and Node.js ( for restful service) it will be easy for one to migrate to other framework easily.
IMO, using HTML with jquery for UI is better, since it is simple and traditional and you will get more support on community forum. Also, you wont have to learn template, templating engines straightaway.
what template engine is recommended for NodeJS when using jQueryMobile Multi-Page template?
I need logic in every view such as include_once('html-header') because I never know is current page is first on rendering list (aka does it match session-privilege criteria).
I've tried Jade but it seems to be completely impropriety solution for such problems. But maybe my design is wrong?
Probably something simmilar to PHP with <? and <?= will be best to fit my project needs.
Edit:
I'm using nodejs as a HTTP server.
You can use emberjs and detect the states and you can append and delete views as you need them to the outlet, Ember uses handlebars template engine to render html
Emberjs
Also check outlets in this page
Is it possible to generate Server side includes with express.js?
I'm trying to reuse my header and footer markup on different pages so I can make header/footer changes in one place.
Try to use partials.
You have to choose between some template engines. The default template engine is jade, so for this you have to do the following: create a file views/header.jade and put your stuff in. in your action you can render the partial with partial('header');
See the expressjs docs for more.