Software Architecture For Front End Developers

First watch the technical video.  

INTRODUCTION TO THE SOFTWARE
It is a massive software stack.  Python on the server.  Javascript on the client.  The menus are done with Pug.js.   55 Python libraries, probably install other libraries as well.  And some large Javascript libraries also.  

The interesting thing is that we are using an object database.  Most people develop on the file system using a relational database.   

We are using an object-graph database. It is a graph of objects, but to make like easier for the end user, we make it look like a tree of objects.  People can think of it as a file system. 

Rather than application programs we use views on objects.  It comes from Python’s Pyramid framework, one of the software’s ancestors.   Which object are you viewing? That is called the context object. 

     The end user’s default view is the index view on the page object.  If you log in and go to the manage menu, you will see many different views on an object.   

./categories.json is a view on a particular node of the tree. It works on any node of the user visible part of the tree. 

You can read more at ForestWiki.com

So it is a graph of objects.  How do we find an object.  We start at some object, and traverse until we find the object.  So that makes it look like a tree.   So a url like

/path/to/some/object

actually traverses a tree of Python objects. 

There are also canonical urls. 

So /object 
is just as good at 
/path/to/some/object. 

But then every object has to have a unique name.  Which is a good idea anyhow. 

We also have proxy objects.  I call them imaginary objects.  They do not exist in the database.  They show content from another branch of the tree. 

So 
/new-jersey.issues

First takes you to the real new-jersey MapOrganization object, and then traverses to the issues proxy object.  What I call imaginary, because it has no permanence in the database. 

So to find an object, we traverse to it, and then look up the view on that object.  The view is often an html template stored ina  separate tree under /Products. 

A view can also be a python object to display that object.  

We use zope.interface to determine which views work on which objects, and what fields an object has.  But that in itself is a long story.  Pyramid hides zope.interface from the developer. 

  Wordpress does it the other way around

A table of articles

each with a short url

Then it cobbles together 

a fake category tree .

But looses the hierarchical security model in the process. 


There are Javascript objects and Javascript Folders

Syntax checkins CSS objects, with folders.  
 
 
In particular uploaded images objects have child thumbnails. 

Take a look at the urls for images, the url specifies the image width or height and it gets generated the first time it is called. 

THE REST OF THIS PAGE IS NOT YET EDITED. THEY ARE A COPY OF  A CONVERSATION I HAD, 
YOU MAY FIND THEM USEFUL, YOU MAY SKIP IT. 

File systems have extensions. image.jpg

Here the objects know their class. 

The dot is not needed, in fact would cause problems now. 
 

So if I want to write a fonts.css file, which will be used many places, where in the tree do I put it?
 
 
LOL

You are good
 
 
There is a whole nother tree which no one has yet seen

Well you say the URL
 
/Products/...

Every Python object has a python class. 

But it also has a web object class. 
 
/Products/manage should allow you to explore, but not edit that tree. 

Which is what makes this really a graph database. 

Everyone thinks they are using a tree, but really it is a graph. 

Every politician points to the politician python class.  But there is also a politician web class.  It stores templates for the politician objects. 

/Products/Root/children/anonymous/politician


The most important from Souheil Chelfou

who spent 5 years before me developing the GUI libraries in Python

search github cromlech dolmen. 

Many of the ideas are from the turn of the century, now mostly forgotten as the big companies move to single page web applications. 

There is a related product called Plone. 

where many of these ideas come from. 

It has its problems. 
No css Folders. 

maybe not yet needed. 

probably best to do basic css, whichever version you think best. 

and over time the tools improve. 
 

Charlie McVicker (he/they) 7:25pm
Plain css is good for me. A folder like structure for managing CSS within the graph would be useful, but if we get short urls for the main css files and can use @import within css I think we will be okay.

So let me make sure I got it so far.
 
 
Charlie McVicker (he/they) 7:26pm
There is a mostly tree-like object graph where all the data is. You wrote a web server in Python+Pyramid that does views into that graph and resolves paths within the graph.
 

7:26pm
rather than one big one.  Much much easier to understand

so traversal is how stuff is found

  Charlie McVicker (he/they) 7:27pm
So if you want that kind of security through the tree structure, but the underlying data structure is a graph, does that mean your graph still has a "top-down" orientation? To me, a graph has no top or bottom and edges go between whatever verticies they want.
 

7:28pm
There is a root of the tree

one traverses the tree. 

You need a root to access an object in the graph. 
 

Charlie McVicker (he/they) 7:28pm
Okay. So it is a tree, but we can link to other branches as if it were a plain graph?
 

7:28pm
Otherwise how do you access an object/

simple answer is  yes. 
 

Charlie McVicker (he/they) 7:29pm
But authentication doesn't follow links to other branches that are not children?
 

7:29pm
The imaginary objects access pages in another branch of the tree. 

Correct

You are very good. 

Authority is only on your branch of the tree. 

You cannot edit an imaginary object
 

Charlie McVicker (he/they) 7:30pm
Okay I think I got it.
 This whole team is very security conscious

We believe we were hacked, when someone deleted Minnesotta signatures we were collecting for ballot access. 
 
 Charlie McVicker (he/they) 7:45pm
Question: Is there anyway for me to tell the webserver to include a CSS file with the HTML it is serving? Should I just add a <link/> somewhere in the source code?
 
 There are many html templates on the site. 

In the appropriate one use the command to include a css file. 
 What you do not get is permission to do python through the web. 

That is a huge security hole where you could change anything on the server. 

although there are some python in the browser technologies floating around her. 

not really used. 
 
 You must have used ./login

https://maps.howie2020.tech/root/Products/Root/Children/login/manage

there are different versions of that

./login/user

so that is much easier and different than having an html template be a file. 

but you still need us to serve those files somewhere, I would think.
 SOME MORE INFORMATION ABOUT THE LAYOUTS

Remember we have a tree of objects, and views on that tree. 

./ChildCategories shows the child tree.  How does it find that view?

Each object has a web class
./editWebClass will show it to you. 
It starts the search for the view in the current object.  If it is not there, it goes to the web class, and up the Products tree until it finds it. 
index is the default view for the page. 
It calls contents which in general calls child categories. 

Politicians, Organizations and Map Organizations call PartyChildCategories instead.

You know what context is. 
View is usually the index object.  It has tons of useful methods. 
Maybe some of them are documented here. 
https://forestwiki.com/view-api-documentation

Let me know when I can login to your docker container and give you permission on the development branch.