Template engines for custom articles (Jade, ReactJS)

1

Hello,
I want to create a website with lots of articles, which are mostly the same in structure, e.g. there is the navbar, title, references/citations and comments. I do not want to go through all my 100+ HTML pages when I change the layout slightly. Imagine a custom standard blog with added functionality.

As a programmer coming from C++ I really want to keep it modular. Also I want to customize the templates if necessary, e.g. add maybe some new elements specifically for an article.

I have seen Jade getting used in the examples here at FCC, but I have never used it myself. I started my project using Node.js. I have also completed the React.js challenges, which would be another alternative.

Can someone recommend me what I should choose to create my website? And how do I organize all the “filled in template files” in my router? I do not want to manually edit or run a script through 100+ pages.

2

I’m not sure if this answers your question, but a particular framework choice does not seem to be the answer. Rather, it seems you want a particular structure of your application(s). Coming from C++, you will know that there are a number of mechanisms (such as templates), which don’t necessarily translate directly into javascript (but javascript has functionality which can do similar things!) but here are a few obvious ones (if this answers your question):

  • Use javascript classes. This does not prevent you from modifying a class(for example, by using prototypes) or modifying individual objects (for example using the prototype chain or properties).
  • You can create functions which can return particular class “functions” depending on passed parameters. (Perhaps there is a module for this somewhere - I’d like to know about that.)
  • Either create your own UI widgets or use as non-opinionated a framework as possible (which still can be dangerous).
  • Use modules for as much as possible, which gives you namespaces, data hiding and a level of modularity above that of javascript-only OOP.
  • Don’t hardwire any name in your program. For example, if you have class Foo_{...}, then you would do something likeconst Foo = Foo_, let f = new Foo(). Then, if you change the name or even the class definition, you won’t have to change anything in the rest of the program (apart from adding or deleting functionality).
  • Use factories for functions. Javascript makes it easy to modify the very nature of functions by adding methods in the prototype chain (not in the prototype object), and adding properties.
  • Don’t hardwire numbers, strings, etc - use indirection.

There’s lots more, but since I’m not sure if this is what you’re looking for, it is probably enough.

3

So I need to generate HTML elements within JS classes or parameterized functions, right?
My idea was to use React to generate some components and just do some composition to individualize particular sites, but generally having the same structure. The rest of your reply are good general points.

4

I do use React within individual classes. I use raw React (not JSX), and use my own method getReactElements(.,...) which invokes React.createElement(.....) maybe many times. Then I can use pure javascript and I don’t need any non-necessary pre-processors (generally to which I am allergic).

Then I use ReactDOM.render(....)to actually render the DOM elements. This really works great and I don’t have to use pre-defined React classes which I don’t completely understand or like.

Here is a very simple earlier example (which I will do over now that I am better educated). I have defined elsewhere

const CE = React.createElement;

which really makes things look a lot nicer and one can nest them so they sort of look like nested HTML. So to create

<div>  
   <div>   
      <p> now is the time </p>
  </div>
</div>

I do

const CE1 = CE;
const CE2 = CE;

function getReactElement(...){
let elem = 
CE('div",obj,
     CE1('div',obj1,
         CE2('p',obj2,'now is the time')
    )
);
return elem
}

Here it is in my class.

class UIButton extends UISimpleRectangle{
	constructor(positionInstance, uiFontObject, className, id, text, 
			callback, includeKeyBool, display, notificationController=null){ 
		super(positionInstance, className, id, null,includeKeyBool);

		this.buttonClicked = this.buttonClicked.bind(this);
		this.getReactElement = this.getReactElement.bind(this);

		this.uiFontObject = uiFontObject;
		this.callback = callback;
		this.text = text;

		this.display = display;			// may be null or undefined

		this.notifController = notificationController; // used for notifications
								// may be null or undefined
	};

	// include argument to use for special purposes
	getReactElement(obj = null){
		if(! obj){
			let obj1 = this.getStyleObject();
			let obj2 = {};
			if(this.uiFontObject) obj2 = this.uiFontObject.getStyleObject();
			obj = extend(obj1, obj2);
			if(this.display) obj.style.display = this.display;
			obj.onClick = this.buttonClicked;
			
		}
		return CE("div",obj, this.text);	
	};

	resize(){
		super.resize();
		if(this.uiFontObject)this.uiFontObject.resize();
	};

	/* must filter extraneous clicks.*/
	buttonClicked(event){
		event.persist();
		//console.log("UIButton - buttonClicked");
		if(event.target.id !== this.id) return;
		if(this.callback)this.callback(this);
		if(this.notifController){
			let notif = new Notification("backgroundFromButtonClicked",this);
			this.notifController.sendNotification(notif);
		}
		
	};

	// returns integers, not strings
	getOffset(){
		let elem = document.getElementById(this.id);
		let rect = elem.getBoundingClientRect();
		return {left: rect.left, top: rect.top, 
			bottom: rect.bottom, right: rect.right};
	};

}; // class UIButton

Hope this helps.

5

Wow, thanks for the great reply! Using raw React is not tedious? And can you shortly elaborate why you do not use JSX? Have you measured the performance win?

6

Using raw Rect is really about the same amount of tedium as using jsx. In my div-div-p example of the previous post, you can do either (I don’t remember exactly how jsx works, but it’s something like)

<div, obj >
   <div, obj1>
      <p, obj2> someText</p>
  </div>
</div>

where obj, obj1,obj2 contain the properties/styles, or in my example

CE( 'div', obj,
    CE1('div', obj1,
       CE2("p', obj2, someText)
   )
);

(recall, CE=CE1=CE2 = React.createElement). This is about the same amount of work. Since I use it so much, I can read it easily.

The tedious part, whether using raw React or jsx, is creating the objects obj, obj1, obj2. All my serious web applications are completely resizable. Anything can resize when the browser window size changes, both horizontally AND vertically - elements, fonts, padding, margins, border widths, drop-down menus, HSL values, etc - anything whose properties/styles are given by, or can be calculated from, a numeric value. I have a simple and transparent way of doing this which happens automatically. You can see it in my sample class in the previous post. So in my objects, I have to include all the elements which resize, every time, and that can be somewhat tedious. But that would be true even if I were to use jsx.

For me, the pros are:

  • I can use my own classes. Since javascript is single inheritance, this is important as I am a dedicated OOP programmer.
  • No preprocessor - all the bugs are my own.
  • Fully transparent argument passing (which in the React classes can become obscure).
  • I really dislike writing and looking at HTML/CSS (this is obviously a weird personal quirk). I do virtually everything in javascript with my own widgets. I decided at the outset that I would use as few frameworks as possible just to make sure I understand (as much as possible) what the issues are and how things really work. I do find raw React an invaluable framework. D3.js is another.

You’ll have to figure out the cons for yourself. It may be in marketing yourself for a job.

1 Like
7

One thing about using raw React which I find really powerful is that, when nesting DOM elements, you can do it with nested function/method calls. So recalling CE = React.createElement, to create the toy example div-div-p in my previous posts in a really complicated way:

let someElement = document.getElementById(...);

base();

function base(){
   let obj = {....};
   let reactElem = CE('div',obj, foo())
ReactDOM.render(reactElem, someElement);
}

function foo(){
   let obj1 = {...};
   return CE('div', obj1, bar());
}

function bar(){
   let obj2 = {...};
   return CE('p', obj2,"now is the time");
}

When using classes, it works the same way, but the classes can easily determine the “path”. Say we have instances of different classes instC1, instC2, instC3, for classes C1, C2, C3. Then, in sort-of pseudocode

let someElement = document.getElementById(...);

base();

function base(){
   let obj = {....};
   let reactElem = instC1.createReactElement();
   ReactDOM.render(reactElem, someElement);
}

class C1{ ...
  createReactElement(){
    let obj = {...}
    return CE('div',obj, instC2.createReactElement());
 }}

class C2{...
  createReactElement(){
   let obj1 = {...}
   return CE('div', obj1, instC3.createReactElement());
}}

class C3{...
  createReactElement(){
    let obj2 = {...}
    return CE('p',obj2,"now is the time");
}}

This turns out to be really really powerful. You get the idea.

8

I’m going to refer to your original requirements:

The solution here is to store all your articles in a database, and just have an html template where you fill in the fields with the dynamic data coming from the database (title, author, article, etc.) You populate your database via some kind of backend administration program, protected by ID/password.

Regarding the html page, you can do the filling-in (title, author, article, etc) via server-side, and send the finished page to the user… or do it client-side via ajax calls to retrieve articles. Either way would work, or use a combination of both methods.

Using this approach, it doesn’t matter if you have 100 articles, or 10,000 articles… if you want to make some change to the template, you only edit (1) file, the template and/or the CSS file.

That’s the big picture view.

The next question now is what database and what server-side language you want to use…

Or if you just want to publish articles, just setup WordPress and be done in a few minutes, and then start writing articles.

1 Like
9

I agree based on the requirements that were outlined, it sounds like Wordpress is the easiest and most straight-forward solution.

10

Thank you so much for all the replies! I think I will start with Wordpress immediately while working with raw React to add more custom functionality and also to fill in the React template with content from a database.

11

It sounds like you want a content management system. You can certainly develop your own, but keep in minds there are a lot of well developed options already available if you are interest in just creating the product. Most notably WordPress, but also platforms like Ghost.

As far as developing one, you can checkout how Ghost implements its stack here for reference.