Open juhnowski opened 7 years ago
drdhaval2785
commented
7 years ago After a long long time, Cologne dictionaries have a frontend developer. Such a great news. I would love to see a simple static web page based on these tools. Seeing is believing in developer world.
I love idea about JSON. It will surely separate Backend and UI.
But why stop at web version and mobile version? Android and ios app are also hot cake nowadays. If backend serves JSONs, these two are also not far off.
drdhaval2785
commented
7 years ago May I request you to prepare a mock up of frontend for web and mobile version, so that functional requirements and inputs may be gathered before actual work starts.
gasyoun
commented
7 years ago @juhnowski glad to see you finally around. I agree that first a lot of research should come ahead of coding.
iOS and Android
I guess to start thinking about mobile without these two does not make much sense.
better detail prototype component and test for usability
Fully agree.
Fonts
If it's web, fonts are web served.
exported to Zeplin.
Zeplin was loading rather long for me. Is it not an issue? Or 2nd time quicker?
juhnowski
commented
7 years ago Good evening @drdhaval2785 , @gasyoun ! Thanks for warm words.
@gasyoun
"a lot of research should come ahead of coding." -
yes, for this purpose first mockups will be useful.
"Zeplin was loading rather long for me. Is it not an issue? Or 2nd time quicker?"
Yes, I think that second time may be quicker, anyway we are free to choose those programs which will be pleasant to us. The web the Zeplin version really slowly works at a slow speed the Internet.
@drdhaval2785
"May I request you to prepare a mock up of frontend for web and mobile version, so that functional requirements and inputs may be gathered before actual work starts."
ok, I will do it. It will be easy for me to get iPhone6 and iPad Pro display sizes for mockups. I expect that Web version will be different from the Pad only in size, but in the Phone version the relative position of components will be changed.
juhnowski
commented
7 years ago I start work: http://5cw75p.axshare.com Axure project has put to: https://github.com/juhnowski/sunscrit-proto
I got iPad screen resolution from http://www.apple.com/ipad/compare/ for Retina display: 2732x2048
funderburkjim
commented
7 years ago It's excellent to have someone familiar with modern Javascript web frameworks taking an interest.
I'm assuming that you are taking the lead in working with React or whatever JS framework.
What you'll need from me regards the backend, I think. There are some tricky issues in deciding what is frontend and what is backend. Will look forward to working with you to develop appropriate backend api.
list02php provides an example of a php app using the current Cologne dev-api.
funderburkjim
commented
7 years ago It is likely that the current dev-api at Cologne is not what you will want ultimately, but it might provide a starting point for discussion.
funderburkjim
commented
7 years ago The basic04a display allows 2 dictionaries; it illustrates the 'getword.php' api.
juhnowski
commented
7 years ago @funderburkjim "starting point for discussion" - exactly!
At first I want to understand all features and all pages. Then I will able to do decomposit components and states, then detail css. Axure is a place for discussion. The another one Zeplin, but it works slowly.
http://www.sanskrit-lexicon.uni-koeln.de/scans/awork/apidev/sample/basic04a/index.html
Thank you.
funderburkjim
commented
7 years ago The point of the basic04a example is to show you an example of how to get data from Cologne for YOUR app. I was not trying to make a general app --- that's what you are doing. The UI improvement suggestions you mention (more dictionaries, texts in scrollable area, or maybe in tabs?, etc., etc.) are reasonable . But, my point was to show you an example of how to get data.
So where in the code of basic04a does it get the data from Cologne, you may ask. Look at the index.html file of basic04a example, specifically at the 'basicDisplay' javascript function. This function sets up the parameters for an ajax call to a 'getword.php' script at Cologne. This call currently just returns a JSON string, containing html. The basic04a example then puts this html string into a div.
Can you make a prototype of your application that uses this getword api?
juhnowski
commented
7 years ago Yes, I'll do it, but some time later. I want to finish UI prototype at first.
gasyoun
commented
7 years ago finish UI prototype at first
It's a non-trivial task. And to finalize even a prototype data would not be bad. So maybe just about time for API?
funderburkjim
commented
7 years ago Work on UI and API go hand in hand, I think. Hard to evaluate UI in absence of data. Hard to develop UI without knowledge of data.
Is your main goal to develop a mobile web app ? What are you envisioning as your deployment environment? GitHub Pages ?
What prompted your interest in the Sanskrit Lexicon at Cologne?
The products you mention (zeplin.io, and axure ) appear to be proprietary closed-source projects.
Have you considered gomix.com ? This is a project by Joel Spolsky, one of the originators of stack exchange. It seems to provide a potentially collaborative online environment for app development using Javascript, css, and html.
juhnowski
commented
7 years ago Hi, @funderburkjim
"Work on UI and API go hand in hand, I think. Hard to evaluate UI in absence of data. Hard to develop UI without knowledge of data."
"Is your main goal to develop a mobile web app ?"
"What are you envisioning as your deployment environment? GitHub Pages ?"
"What prompted your interest in the Sanskrit Lexicon at Cologne?"
"The products you mention (zeplin.io, and axure ) appear to be proprietary closed-source projects."
"Have you considered gomix.com ? This is a project by Joel Spolsky, one of the originators of stack exchange. It seems to provide a potentially collaborative online environment for app development using Javascript, css, and html"
I want to offer the following plan:
I am ready to discuss this plan
gasyoun
commented
7 years ago Work on UI and API go hand in hand, I think. Hard to evaluate UI in absence of data. Hard to develop UI without knowledge of data.
Agree.
funderburkjim
commented
7 years ago @juhnowski There is already a repository under sanskrit-lexicon project at GitHub that is set up for GitHub Pages; @drdhaval2785 set this up and did some experiments a year ago. SInce we are all familiar with GitHub, this might be a good place for the development work you are doing.
The name of the repository is 'sanskrit-lexicon.github.io'.
A repository with this kind of name is, on the one hand, accessible as any other GitHub repository that is part of the sanskrit-lexicon project, at the
url: https://github.com/sanskrit-lexicon/sanskrit-lexicon.github.io/
On the other hand, it is special in that html pages put into this repository (at any level of subdirectory) can be served as a web page. For instance, Dhaval made an html file at the relative address of cologne/highlighter/index.html
The following url accesses this file as a normal editable Github file: https://github.com/sanskrit-lexicon/sanskrit-lexicon.github.io/blob/master/cologne/highlighter/index.html
But this url serves that same file as a web page:
https://sanskrit-lexicon.github.io/cologne/highlighter/index.html
So, why don't we start by having a subfolder ui-dev: https://github.com/sanskrit-lexicon/sanskrit-lexicon.github.io/ui-dev
And put code into various subfolders of ui-dev.
While I am intrigued with gomix, it might be better to start with this GitHub Pages approach; we can look at gomix or elsewhere later if we run into limitations with GitHub Pages.
@juhnowski comments?
gasyoun
commented
7 years ago While I am intrigued with gomix, it might be better to start with this GitHub Pages approach; we can look at gomix or elsewhere later if we run into limitations with GitHub Pages.
Agree.
funderburkjim
commented
7 years ago Here's a question about reactJS and redux.
About all I know about reactJS is that it might be one of several Javascript web frameworks; I have not encountered redux at all.
Also, I understand that many Javascript web frameworks require NodeJS for the development; what I think this means is that the developer constructs various input files in certain formats. Then, some aspect of the nodejs environment processes these files and generates a folder of JS, CSS, html and this folder is then deployed to some server.
Is react like this -- namely is nodejs required for development?
gasyoun
commented
7 years ago is nodejs required for development
That's what I understand as well, yes.
funderburkjim
commented
7 years ago @juhnowski Is that right, that nodejs is part of the tool chain required for reactJS development ?
nodejs needed for redux also?
juhnowski
commented
7 years ago yes, but simple notepad and web browser is enough for development react.js+redux app
funderburkjim
commented
7 years ago @juhnowski Please be patient. I'm trying to understand your point of view.
I looked at https://github.com/juhnowski/sanskrit-lexicon-js.
index.html is just text with JS libraries loaded from cloud. It runs anywhere - on desktop, GitHub Pages,... Great!
But where did index.html come from? Did you type all this in? or was the nodejs environment somehow involved? If so, can you add the code required to build index.html into the repository. Or, even better, put one of the index.html, index-1.html, etc. into gomix.
In https://github.com/juhnowski/sunscrit-proto. This is somehow created from your UI prototype http://5cw75p.axshare.com made with the axure tool? what is the 'proto1.rp' file? It shows as a large file (300K), but must be in some proprietary, non-text format. How would it relate to the sample sanskrit-lexicon-js/index.html.
You mentioned Zeplin. This seems to be a design tool. Were you mentioning it just as a possible tool for designing a web page - another way to do what axure does?
funderburkjim
commented
7 years ago I still think that the best next step is for you to make a full application, one using the getword api at Cologne that I mentioned above, and your 5cw75p.axshare.com UI prototype.
I realize this first example would be imperfect in numerous ways.
But it would serve the purpose of letting us see at least most of the moving parts that are involved in
this new and better approach to making a web application.
At the moment, my hunch is that the best place to do this next step is at gomix, since it has live support for nodejs web apps, and since it is easy to view the code.
drdhaval2785
commented
7 years ago @funderburkjim and @gasyoun
As I understand, @juhnowski wants to finalize the frontend prototype first and then create frontend version and finally send some API calls to backend. It seems fine to me. The need for him as of now is to validate the frontend prototype and give feedback. I groped with the axshare link he sent. It has a discussion page on each prototype. I have noted my input in discussion portion of home page. We should have a look at the current Cologne frontend and write a detailed change note as possible. See
funderburkjim
commented
7 years ago I think it is premature to think that we can 'finalize' anything. Just take any of the sample UI prototypes and implement it with existing api, so we can see from start to finish, what is involved.
From the UI prototype (as shown in screen shot), what is the next step to implmentation with reactJS ?
If my questions to @juhnowski are scaring him away, I can step aside and let others work on this without interposing my opinions.
gasyoun
commented
7 years ago @funderburkjim no, he is not scared away, he had health issues that should be settled by now or soon enough. He was waiting to start the UI update since one year ago. Now, when he has more time, he is eager to help. And without you he will not be able to make it work, that's for sure.
drdhaval2785
commented
7 years ago Jim,
You need to deliver responses of APIs in JSON instead of HTML embedded. That will help him develop and integrate frontend for start to end project.
funderburkjim
commented
7 years ago Glad he's not scared away; sorry to hear about health issues @juhnowski Get well soon!
Regarding API and JSON: I think the 'getword' example is ok to start. It IS returning JSON, but a JSON string rather than a JSON object with named fields. It shouldn't be hard to make a version which returns a JSON object. But I'd rather wait until more definite specifications are known to do this.
@drdhaval2785 : From your experiment with axure, maybe you can help me understand what is meant by a 'prototype'. From what I see in the screen shot, my impression is that a prototype is an HTML/CSS design; for instance, it could be developed by a static web-site wysiwig html editor; or even by manual construction of html. Is this impression correct, or is there more to a prototype than this?
juhnowski
commented
7 years ago Hello, now at me everything is all right with health. I periodically have painful campaigns to the dentist .
@funderburkjim: " Just take any of the sample UI prototypes and implement it with existing api, so we can see from start to finish, what is involved." - yes, you are right. I get one issue and fix it by React.JS. "it could be developed by a static web-site wysiwig html editor" - yes, I planned such use. The main purpose of the prototype is to draw static pages in order to identify use cases and to decompose components
@drdhaval2785 "You need to deliver responses of APIs in JSON instead of HTML embedded." - yes, It will be better. In this case, I can build a more accurate data model on the UI side.
I also have news. I began to study hadup and can share training in private. I would like to know your opinion about the possibility of using this technology on the backend for searching, filtering, statistics. It will be possible to conduct statistical studies of dictionary articles in the context of original texts.
gasyoun
commented
7 years ago 
vvasuki
commented
7 years ago I would like to know your opinion about the possibility of using this technology on the backend for searching, filtering, statistics. It will be possible to conduct statistical studies of dictionary articles in the context of original texts.
My note on couchdb in https://github.com/sanskrit-lexicon/Cologne/issues/117#issuecomment-306047026 may be of interest here. You can write Map-reduces and create various views quite easily in JS.
@kakella this thread may be of interest to you.
Foreword
As start point I got working app by link: http://www.sanskrit-lexicon.uni-koeln.de/scans/MWScan/2014/web/webtc2/ Source files was placed: https://github.com/juhnowski/sanskrit-lexicon-js
Motivation
DESIGN
1 I want to bring to your attention on two products: https://app.zeplin.io/projects.html - this is mostly for presentation layer https://www.axure.com/ - more complicated tool. I will create design forms/screens, and you will suggest or make a changes yourself. (Screens I may send directly by email for details as example)
ARCHITECTURE
All code divided to parts:
Backend will be REST-full Web Services which are respond json's format responses. Today backend returns simple html. I apologize that it will not be hard to extend it for json responds on existing source code without huge refactoring. Frontend will be based on React.JS and Redux Mobile version will be based on React Native library.
Links: React: https://facebook.github.io/react/ React Native: https://facebook.github.io/react-native/ Redux: http://redux.js.org/
PROTOTYPE
The basic aim of this stage is validate some solutions, behaviors... Some easy prototype may be creating in simple html file and directly open it in browser without place in webserver. Some complex prototype may be done in axure.
Following I show my action log when another one has been done.
DEVELOPMENT
Create demo, in console:
Download and install Node.JS https://nodejs.org/en/ Node.JS isn't necessary for production, it's only for development case
In console type: npm install -g create-react-app
This is a Facebook tool
create-react-app sanskrit-lexicon
Result: success creation project and suggestions: cd sanskrit-lexicon npm start
or other commands: npm start npm run build npm test npm run eject
Here is development environment setup.
MY PROTOTYPE LOG
AIM: create search component. In this issue context - represent how to easy to solve problems which was not trivial years ago.
ISSUES
PROBLEMS
RESUME
Thank you that have found time and have read up to the end. I have tried to describe a full cycle of development on the React and to show that improvement UI by transition to these technologies not such a complex challenge as could seem on at first.