Static vs. dynamic content in docpad system - how to create dynamic content? - ajax

DocPad is described as being comparable to other static site generators, but it is also described as being "not limited to static site generation".
I've been browsing the DocPad website and other documentation and haven't yet been able to find anything that seems to explain how to incorporate dynamic content, and what types of limitations may be involved?
As a relative beginner, I am wondering if anyone can help me better understand the methodology whereby dynamic content would be incorporated into DocPad...? e.g. AJAX, and dynamic server-side scripts for doing things like dynamically loading pictures from Flickr into a webpage when a certain tag is clicked...
Thanks.

So there's a few ways DocPad facilitates dynamic content:
Via the regenerateEvery configuration option. This will regenerate your website every so often you specify. This great when combined with plugins like feedr for pulling in data from remote feed sources (like your latest social activity), as well as repocloner which clones out and keeps a git repository up to date inside your project. The benefit of this option is it's really easy to do and provides the illusion of a dynamic website. For instance the Benjamin Lupton Website applies this method to keep it's statistics on the home page, as well as the social data in the sidebar up to date. Every hour it regenerates with the latest information. Making it fast, and also illusively dynamic.
Via the dynamic meta-data property. When set to to true this tells the DocPad server we should re-render that document on each request, rather than just once. This works great inside the Kitchensink Skeleton for search pages and misc forms. This way is most similar to PHP development.
Via the serverExtend event. This event allows you to hook into and extend the DocPad server, allowing you to add extra server-side logic, handling, etc. Common use cases is to add extra routing to your server to handle route aliases, adding form processing such as a contact form, or to add a RESTULful interface for a Backbone.js application. The DocPad Website uses this to add extra routing and a regenerate post-receive hook for the documentation. The NodeChat Skeleton uses this to add the Socket.io server-side logic.
Via the API. This way is the most involved but can be quite rewarding if you just wish for DocPad to be a small part of an existing node.js application. With this, you can create a DocPad instance in your code and interact with it. The grunt-docs grunt task utilises this :)

Related

Should views be rendered by the app, or should a static site contact the API using AJAX?

I am starting to write my first web app with Node.js and Express. I have two approaches in mind.
Create two sets of routes. One that sends JSON, one that renders the page using a templating engine
Create a static website that makes API calls to the backend using AJAX, and have only routes for the API.
I understand that approach #2 depends on AJAX support in the browser, but if this was your project, based on the advantages and disadvantages of each approach, which would you choose and why?
If I am reading it right, both options #1 and #2 first set of routes is an API that returns JSON rather than sends it.
Assuming that in #2 you wouldn't create static pages with JavaScript doing AJAX calls, but rather still use express static routing like app.use('/', express.static(path.join(__dirname, 'dist'))); the difference between 2 approaches isn't that big.
Unless you already know some supported template language, such as mustache the cons are that you have to learn one and before that pick one (which isn't always an easy task from my experience!).
If you don't know one, depending on your application, you might still benefit from learning and using one. As an example you can think of a very generic UI where a single template could be reused very many times - like a generic database UI similar to, say well known phpmyadmin.
In case of static routing, you can achieve similar results by using a JavaScript framework which has components or templates, such as angular. If you aren't planning to use one, that could result in a lot of code duplication of otherwise re-usable widgets. And even when using one I can imagine a case when template engine would result in less code (or less files in your project at the very least). Not sure though if it's going to be easier to navigate and moreover to cover with tests when the project grows.
Without knowing more about your project it is hard to give more advice.
If the product you're developing is primarily static content with some dynamic pieces here and there, I'd recommend serving HTML from your backend via a templating system. A good example of this would be a blog. You'll end up with better SEO and there are less moving pieces to grok in this approach.
However, if you want to develop a single page application, I recommend using your backend entirely as an api, and writing your client side logic entirely in React/Vue/Angular/whatever. Single page applications have their front ends written entirely in javascript, and are best suited to highly dynamic, "app like" experiences online. Think gmail or facebook.
In my current project we use both approaches. Many views are static and data is obtained from API calls (we just use angular) or bootstrapped values (we load some objects with template, like user roles etc.)
However, some views are rendered on server site, because it easily allow us to dynamically inject values, tokens or other supporting data without making extra requests.
So, I vote for flexibility

Demandware MVC concept

I am new guy to Demandware and I am switching from Magento to Demandware.
Demandware is not opensource I am not getting proper tutorials, stuff to understand the concepts of it.
I am from Magento so I know the Magento MVC structure.
But in Demandware we have different concepts like pipelines, pipelets, ISML scripts, ECMA script, DW scripts etc.
I want to know the MVC pattern of Demandware.
How it works and what are the basic concept I need to concentrate?
I would suggest to request a Demandware XChange account as soon as possible for you, so that you get access to the Demandware community portal and also to the API documentation.
In short:
Models are Demandware Forms and Demandware API objects
Controllers are Demandware Pipelines (there are JavaScript Controllers that are recently released, you may find these easier to understand if you have Node.js experience). These can call DW Scripts (DemandwareScript is based on ECMAScript standard 5.0 for JavaScript with some extensions like E4X and optional types)
Views are the isml templates. You should avoid including a lot of logic in them, either with isml tags like isif, isloop, etc. or with isscript.
Any further questions - let me know.
Hope this helps,
Zlatin
I hope you'll be able to avoid pipelines and dwscript. Those are a bit older. The most recent version works with plain old JavaScript, with pipelines being replaced by controllers.
Be aware that the underlying JavaScript engine is Rhino, which isn't really modern.
The Demandware documentation is open source now anyone can access to without having an exchange account it has the latest SFRA(javascript) based concepts as well
here is the link for the docs
Demadware Documentation
Demandware is very much designed around the MVC concept (in theory). The pipelines are basically your controllers and each pipeline filename (the xml file) is the first part of the URL and the start nodes inside the pipeline are the second part of the URL that basically represent the controller (eg Cart.xml has a start node called Show, so the url is Cart-Show). At the end of the pipeline flow chart is, usually, an interaction node to that links to an ISML file, those are basically the View and are HTML with some minor Demandware-specific markup.
Typically in the MVC world you try to prevent putting business logic in the views, however if you use SiteGenesis as your starting point you'll find that not to be the case on most of the pages. If you switch to using Javascript Controllers instead of Pipelines, then it'll be closer to the Magento style of MVC (but using NodeJS-like syntax).

Jenkins UI customization

I want to change the look and feel(ui customization) of Jenkins. Also I would like to add new views(say like new html pages or web pages) with navigation to the required jenkins pages etc.
Please let me know if any single plugins will help me to do so.Any relevant information(how ever generic) will be very helpful.
Any suggestions or links or tutorials is also appreciated.
PS:- Pretty new to jenkins.The inputs from here will help me to add more details to the questions.
I am looking for documents or tutorials that specify Skinning Jenkins using plugins like :-
https://wiki.jenkins-ci.org/display/JENKINS/Simple+Theme+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+UI+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/JSWidgets+Plugin
The plugin page is providing very little information on how to use these and the benefits and the extend to which the UI can be changed.
Any doc or link is appreciated.
Assuming you don't want to write a Jenkins plugin, for adding pages, the best suggestion I can make is to use an HTTP proxy such as NginX, and configure it so that the pages you want to add are plain html files, and Jenkins is proxied for the rest of them. To a visitor, they will look like they are all part of the same site; you could copy code from the head and body sections of Jenkins-served pages to include some of the navigation.
The Simple Theme Plugin, which you found, will let you do basic customization of the look and feel of Jenkins. I do that for my build server and proxy it using this configuration fragment for NginX. The relevant CSS is in this CSS file - toward the end, look for the // JENKINS CUSTOMIZATION comment.
We use the Simple theme plugin - pointed at a css file for the simple styling, and a JS file to fix a couple of DOM oddities (some of the tables in the new look and feel have mismatching column counts).
Those two files need only be hosted either a handy http server, or you can place them in usercontent.
You need only refresh the page in the browser to see the changes. Both files can then happily reference other files served up too.
Handy things to note:
Jenkins has jquery, parts of YUI loaded and prototype loaded - so you can use them in your scripts.
If while debugging, the refresh gets in the way then use the console to enter the following to temporarily stop it without pausing JS: refreshPart = function() {}
When making DOM tree changes to content that is refreshed - attach it to the layout updates with:
layoutUpdatecallback.add(my_function) - that way your changes are applied to new incoming content.

RESTful API with CMS Made Simple

I have a client with a content-heavy site built in CMS Made Simple. The redesign requires a mostly AJAX interface, and I think a frontend framework like Backbone or Angular would be the way to go.
I want to avoid moving off CMS Made Simple, though (client is used to that interface, it will be annoying to migrate all the data).
I think if I could find or create a RESTful api for CMS Made Simple, I'd solve my problem. But after searching around online, I only found CGSocialApp module, which seems to provide a limited API for things like user management. I've also looked into other AJAX solutions for CMS Made Simple, and there don't seem to be good modules for it.
If there is no ready-made solution for me, how complex would building a RESTful API module be? I haven't built a RESTFUL api in a PHP framework before.
Thanks for any guidance!
So, there is no easy answer for this question, as the CMSMS doesn't have a build-in RESTful API.
I would go for one of the two solutions:
1. Output the content as hand made json.
In CMSMS, you really have a lot of control on the templates. You could change the default templates to output json content instead of HTML content. The only issue is that the CMSMS will still send an http content-type header, that you can try to ignore in the JS part.
To access the menu, just remove it from the main template and create an empty page who output the {menu}with a custom template that also build json content.
That's the quick and dirty solution, but it should be very accessible in terms of doing it.
2. Create a dedicated module.
As far as I know, there are no modules that expose the CMSMS in RESTFul format, but a module is really very easy to build. Well, you can try to build it yourself, with the help of the community. It don't really solve the current problem, but it's a hint.
I hope it shed some light on the problem.

Having multiple AngularJS apps for one site?

I am developing a site that can be broken down to a handful of main pages. These pages can be thought as isolated from each other, except they share the session data (ie. session id and logged-in username).
Initially, I was gonna build the site as a SPA using ng-view (ie. make the pages into AngularJS views). But then, I don't see any benefits for my site to be implemented in that way. And it would require extra time and efforts to make it support SEO (Making AJAX Applications Crawlable).
Going with an approach that does not provide any benefits and even creates extra workload doesn't seem to be too smart. So I thought to myself, why don't I make the main pages of my site into individual AngularJS apps. The parts of the site that need to be indexed by search engines are simply the initial screens of some of those apps, so I wouldn't need to do extra work for SEO. (Note: The initial screens are rendered by the Django server with data for search engines to crawl, so they are non-blank.)
For each of the apps, it may or may not have its own set of partials, depending on the requirements on it.
Example:
mydomain.com/item_page/1234 (load "item" app)
mydomain.com/dashboard (load "dashboard" app)
mydomain.com/account (load "account" app and default to "tab_1" view)
mydomain.com/account#tab_1 (load "tab_1" view of "account" app)
mydomain.com/account#tab_2 (load "tab_2" view of "account" app)
mydomain.com/post_item (load "post" app)
This is solely my random thought and I haven't seen any AngularJS examples that are comprised of multiple AngularJS apps. I would like to know:
Is the multiple-AngularJS-apps for one site approach feasible? What are some caveats that I should be aware of? Are there any example site out there in the wild that's taking this approach?
If feasible, how do I share the session data between the apps?
Note this post is about multiple AngularJS apps for one site, not multiple AngularJS apps on the same page.
There is nothing wrong with such approach, as long as you keep the size of downloaded JS script small enough, and ensure good caching. One of examples of such applications can be GitHub (they are not using angular, but approach is the same). When you go Issues page on GitHub, it loads an html page, common Github JS libraries and page specific JS code. Navigation and actions inside page, are handled by that single page specific script. If you go to other section (like Code) a new page with new page specific JS code will be loaded. Another example is Amazon AWS console, they even use different frameworks for different pages. (both GitHub and Amazon don't use Angular, but this approach works for any JS based framework, even for GWT).
As for sharing some session data between pages, you can embed this info directly in the page itself, using inline scripts or hidden elements. E.g. when your server is generating page, it should also generate some session information into the page. Another approach is to download session data once, and store them in local storage/session storage.

Resources