Anahita Project

The #Anahita #project management group. Visit https://github.com/anahitasocial for more information about Anahita code and how to get started.

Stories

Rastin Mehr

Rastin Mehr commented on the topic

React/Redux Architecture in Anahita

I've been looking into ways for implementing a good React Redux architecture in Anahita which will respect the integrity of existing apps and extensions development. Normally in javascript apps eve...

Read More

I've been looking into ways for implementing a good React Redux architecture in Anahita which will respect the integrity of existing apps and extensions development. Normally in javascript apps everything is combined once and compressed as a final app.js bundle which gets executed in the browser. Once the bundle is created it is permanent until it is rebuilt again. So far 2 approaches come to mind:

Rebuilding the bundle every time: every app provide their own javascript components, stores, and reducers. Everything an app is installed or uninstalled, the bundle file is recreated. There are several issues with this architecture: 

  1. we need to install NodeJS on our servers as well as the standard LAMP or LEMP stack. 
  2. the bundle file may get too large if too many apps are installed
  3. ... I don't know what else could go wrong at this point
The pro is that apps can build custom user interfaces and workflows 

Anahita provides a javascript app that all apps must adhere too: this means Anahita provides a javascript single page app (SPA) and a specific set of UIs and Views that all apps are allowed to use. Apps will only provide additional RESTful API, but no javascript of their own. Native iOS and Android apps are like this. We use a specific set of UI views and interface elements and communicate with multiple APIs. I like the simplicity of this architecture and we won't need to install NodeJS on our servers. It will however take away freedom from apps.

Code Splitting: this is an approach that a number of larger projects are using. The idea is that using Webpack an entry point bundle file is created for Anahita and then it will lazy load additional javascript modules as needed. We probably won't need to have NodeJS on our servers for code splitting. It seems to solve the app portability issue. It can however add to the complexity of the apps.

I am currently researching different code splitting methods. If you have any ideas, please share!

#ReactJS #ReduxJS #CodeSplitting #Webpack

Read Less
Perhaps we better start coding and see what patterns emerge. We'll find the solution on the way. This concept is so new, looks like that's what everybody is doing.
Rastin Mehr

Rastin Mehr started a topic

React/Redux Architecture in Anahita

I've been looking into ways for implementing a good React Redux architecture in Anahita which will respect the integrity of existing apps and extensions development. Normally in javascript apps eve...

Read More

I've been looking into ways for implementing a good React Redux architecture in Anahita which will respect the integrity of existing apps and extensions development. Normally in javascript apps everything is combined once and compressed as a final app.js bundle which gets executed in the browser. Once the bundle is created it is permanent until it is rebuilt again. So far 2 approaches come to mind:

Rebuilding the bundle every time: every app provide their own javascript components, stores, and reducers. Everything an app is installed or uninstalled, the bundle file is recreated. There are several issues with this architecture: 

  1. we need to install NodeJS on our servers as well as the standard LAMP or LEMP stack. 
  2. the bundle file may get too large if too many apps are installed
  3. ... I don't know what else could go wrong at this point
The pro is that apps can build custom user interfaces and workflows 

Anahita provides a javascript app that all apps must adhere too: this means Anahita provides a javascript single page app (SPA) and a specific set of UIs and Views that all apps are allowed to use. Apps will only provide additional RESTful API, but no javascript of their own. Native iOS and Android apps are like this. We use a specific set of UI views and interface elements and communicate with multiple APIs. I like the simplicity of this architecture and we won't need to install NodeJS on our servers. It will however take away freedom from apps.

Code Splitting: this is an approach that a number of larger projects are using. The idea is that using Webpack an entry point bundle file is created for Anahita and then it will lazy load additional javascript modules as needed. We probably won't need to have NodeJS on our servers for code splitting. It seems to solve the app portability issue. It can however add to the complexity of the apps.

I am currently researching different code splitting methods. If you have any ideas, please share!

#ReactJS #ReduxJS #CodeSplitting #Webpack

Read Less
Rastin Mehr

Rastin Mehr commented on the Article

React and Redux resources

React, Redux, Material Design, and more resources for developing Anahita user interfaces in version 4.4 and later
Umesh liked this
Added 2 more links about #ReduxJS Connect and API call examples
Rastin Mehr

Rastin Mehr and Umesh commented on the topic

Upgrade to 4.3

I'm in process of migrating from 4.1.8 to 4.3 .. However I'm getting site:init as the only available command when I execute ./anahita

I used composer command to get the latest file. Is there anythin...

Read More

I'm in process of migrating from 4.1.8 to 4.3 .. However I'm getting site:init as the only available command when I execute ./anahita

I used composer command to get the latest file. Is there anything I'm missing?

Read Less
@ugawade how did the upgrade go? Do you notice a performance improvement?
Umesh
Umesh
July 17 2017 Permalink
@Rastin Thanks for all the optimization done in latest Anahita version. Performance is definitely much better than earlier version. I coudn't quantify it systematically however pingdom and webpagetest tools show 25%-... Read More
@Rastin Thanks for all the optimization done in latest Anahita version. Performance is definitely much better than earlier version. I coudn't quantify it systematically however pingdom and webpagetest tools show 25%-35% improvement for me.

Earlier PHP used to spawn 15-20 PHP-FPM processes and now it seems it can handle same load with just 4 PHP-FPM processes.

One more observation is, APC earlier used to create lot of fragamention. APCU seems to be managing memory more efficiently.

The only problem that I couldnt resolved yet is, use of Varnish in front of Anahita. It works well for read-only pages but all POST messages are terribly slow. POST messages are quick and fast without Varnish so something that I need to debug in my Varnish config --- to do for next weekend Read Less
Rastin Mehr liked this
Yeah I'm not sure how Varnish could improve things for an application like Anahita. OPCache and APCu are quite effective in php7. Also the size of codebase is now much smaller and session management is more efficient.... Read More
Yeah I'm not sure how Varnish could improve things for an application like Anahita. OPCache and APCu are quite effective in php7. Also the size of codebase is now much smaller and session management is more efficient. There is still room for improvement in the next release. In 4.3 we only focused on extracting Joomla. I'm glad that your site's migration went successfully. Read Less
Rastin Mehr

Rastin Mehr shared a note

More #ReactJS and #ReuxJS code study this week 🤓 and we should be ready to start #Anahita development next week. This was a time consuming research and the fresh possibilities are exciting!
James Imani liked this
Rastin Mehr

Rastin Mehr commented on the Article

React and Redux resources

React, Redux, Material Design, and more resources for developing Anahita user interfaces in version 4.4 and later
Umesh liked this
This isn't JQuery. This is a whole new approach to developing web and mobile user interfaces. A React app is a complete app that runs within the browser (or server side for NodeJS apps). It follows functional programm... Read More
This isn't JQuery. This is a whole new approach to developing web and mobile user interfaces. A React app is a complete app that runs within the browser (or server side for NodeJS apps). It follows functional programming and design patterns that are new and unlike what we are used to in Rails or PHP MVC frameworks.

One effective way to study the code examples once you finished reading all the docs and tutorials: get the code up and running, then go to every js file, comment out the code, rewrite the code one statement at a time and learn what it does and why it is used. It's perfectly ok if you look at the code you have commented out. The idea is that you become familiar with the syntax, design patterns, and being curious about the code that you are reading. Read Less
Umesh

Umesh commented on the topic

Upgrade to 4.3

I'm in process of migrating from 4.1.8 to 4.3 .. However I'm getting site:init as the only available command when I execute ./anahita

I used composer command to get the latest file. Is there anythin...

Read More

I'm in process of migrating from 4.1.8 to 4.3 .. However I'm getting site:init as the only available command when I execute ./anahita

I used composer command to get the latest file. Is there anything I'm missing?

Read Less
Umesh
Umesh
July 11 2017 Permalink
Sure .. Major part of upgrade is now over. I need to get all my customizations migrated. As those are series of minor tweaks, it will take some time for me
Rastin Mehr liked this
Umesh

Umesh and Rastin Mehr commented on the topic

Upgrade to 4.3

I'm in process of migrating from 4.1.8 to 4.3 .. However I'm getting site:init as the only available command when I execute ./anahita

I used composer command to get the latest file. Is there anythin...

Read More

I'm in process of migrating from 4.1.8 to 4.3 .. However I'm getting site:init as the only available command when I execute ./anahita

I used composer command to get the latest file. Is there anything I'm missing?

Read Less
Umesh
Umesh
July 10 2017 Permalink
@Rastin
Sorry I realized that I should have started this topic in support instead of Anahita Project. My apologies

Yes ..files are there in media/ folder.. My individual apps working as expected. Looks like my st... Read More
@Rastin
Sorry I realized that I should have started this topic in support instead of Anahita Project. My apologies

Yes ..files are there in media/ folder.. My individual apps working as expected. Looks like my story stream breaking possibly because of custom app. As of now I cannot render Dashboard or any group or actor stream. I'll go through the table structure and data changes for "Story" and shall revert Read Less
Rastin Mehr liked this
Umesh
Umesh
July 10 2017 Permalink
Finally my search ended at components/com_base/templates/helpers/ui/_ui_infinitescroll.php file

Further debugging reveled that I was getting mysql error

"Query contains nonaggregated column 'anh.story.name' whic... Read More
Finally my search ended at components/com_base/templates/helpers/ui/_ui_infinitescroll.php file

Further debugging reveled that I was getting mysql error

"Query contains nonaggregated column 'anh.story.name' which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by of the following query ..... "

after running following command in mysql command prompt everything started working

set global sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE';

I'm not sure if this is the final solution. I need to dig this furthe as this must be something very specific to my environment

My env details are
mysql Ver 14.14 Distrib 5.7.18, for Linux (x86_64) using EditLine wrapper

PHP 7.1.7-1+ubuntu16.04.1+deb.sury.org+1 (cli) (built: Jul 7 2017 09:41:45) ( NTS ) Read Less
Rastin Mehr liked this
Keep us posted, I am curious to see your network after this upgrade 🙂
Umesh

Umesh and 2 others commented on the topic

Upgrade to 4.3

I'm in process of migrating from 4.1.8 to 4.3 .. However I'm getting site:init as the only available command when I execute ./anahita

I used composer command to get the latest file. Is there anythin...

Read More

I'm in process of migrating from 4.1.8 to 4.3 .. However I'm getting site:init as the only available command when I execute ./anahita

I used composer command to get the latest file. Is there anything I'm missing?

Read Less
Umesh
Umesh
July 09 2017 Permalink
Looks like I need to follow 2 step proces
1. 4.1.8 to 4.2
2. 4.2 to 4.3

And I may have to start with PHP 5.4 or 5.6 instead of PHP 7
Rastin Mehr liked this
Umesh
Umesh
July 09 2017 Permalink
I'm stuck at 4.3.0 with below error
Couldn't process file /usr/share/geetmanjusha/anahita-4.3.0/vendor/anahita-platform/installation/sql/data.sql

Looks like component and plugins table structure changed in 4.3.0. ... Read More
I'm stuck at 4.3.0 with below error
Couldn't process file /usr/share/geetmanjusha/anahita-4.3.0/vendor/anahita-platform/installation/sql/data.sql

Looks like component and plugins table structure changed in 4.3.0. So I'll have to find a way to bypass this error Read Less
If site:symlink isn't available, it means your configuration.php file isn't accessible or is missing. Make sure that's created in the correct location. That'd prevent the cli form accessing the database and not able t... Read More
If site:symlink isn't available, it means your configuration.php file isn't accessible or is missing. Make sure that's created in the correct location. That'd prevent the cli form accessing the database and not able to run data.sql. Read Less
@ugawade are you following this instruction?

Upgrading from Anahita 4.2 to 4.3

Instructions on upgrading from any of the Anahita 4.2.* to 4.3


Also please make sure you have backups of your database file, in case thing... Read More
@ugawade are you following this instruction?

Upgrading from Anahita 4.2 to 4.3

Instructions on upgrading from any of the Anahita 4.2.* to 4.3


Also please make sure you have backups of your database file, in case things went wrong so you can try again.

PS: This would have been a good question for the support group since it is support related and has nothing to do with the core Anahita project Read Less
Upgrade with php 5.6 and then switch to php 7. That's because only Anahita 4.3 is compatible with php7 otherwise you'd get all kinds of warnings and errors. Although when you pull the most recent 4.3 codebase, from th... Read More
Upgrade with php 5.6 and then switch to php 7. That's because only Anahita 4.3 is compatible with php7 otherwise you'd get all kinds of warnings and errors. Although when you pull the most recent 4.3 codebase, from that point it is php7 compatible. Read Less
Umesh
Umesh
July 09 2017 Permalink
Nick Thanks for a quick response.

As I started with site:init I was expecting it to create confiuration.php file and then make site:symkink command available. However during site:init itself I was getting above err... Read More
Nick Thanks for a quick response.

As I started with site:init I was expecting it to create confiuration.php file and then make site:symkink command available. However during site:init itself I was getting above error.

Anyway I copied configuration.php file manually, ran site:symlink, installed packages and also ran db:migrate:up

So far I can login. Visit my profile. however dashboard not rendering because all my component specific JS file references are still pointing to non existing folder (e.g. /www/com_composer/js/_composer.js)

If you throw some light on this particular issue that would be really great Read Less
Does the file exist in your www/media/com_composer/js directory? https://github.com/anahitasocial/anahita/tree/master/src/media/com_composer/js
Also do you have any custom templates or apps? They all need to be updated too.
Umesh

Umesh started a topic

Upgrade to 4.3

I'm in process of migrating from 4.1.8 to 4.3 .. However I'm getting site:init as the only available command when I execute ./anahita

I used composer command to get the latest file. Is there anythin...

Read More

I'm in process of migrating from 4.1.8 to 4.3 .. However I'm getting site:init as the only available command when I execute ./anahita

I used composer command to get the latest file. Is there anything I'm missing?

Read Less
Rastin Mehr

Rastin Mehr published a new Article

React and Redux resources

React, Redux, Material Design, and more resources for developing Anahita user interfaces in version 4.4 and later
Umesh liked this
Nick Swinford

Nick Swinford and Rastin Mehr commented on the note

Our focus is shifted on research and prototyping for the 4.4 release. If you know any technologies or articles about #ReactJS #VueJS #Flux #MaterialDesign #MobileFirst and #ProgressiveWebApps pleas... Read More
Our focus is shifted on research and prototyping for the 4.4 release. If you know any technologies or articles about #ReactJS #VueJS #Flux #MaterialDesign #MobileFirst and #ProgressiveWebApps please share and tag. Read Less
@Rastin, any plans to use Webpack for bundling Anahita with React? If so, it'd be great if Anahita supported code splitting out of the box! https://hackernoon.com/straightforward-code-splitting-with-react-and-webpack-... Read More
@Rastin, any plans to use Webpack for bundling Anahita with React? If so, it'd be great if Anahita supported code splitting out of the box! https://hackernoon.com/straightforward-code-splitting-with-react-and-webpack-4b94c28f6c3f Read Less
Rastin Mehr liked this
I haven't looked into it yet. I am still studying Redux patterns and trying to reimagine Anahita scenarios. I've seen Webpack mentioned in the documentation several times, so I'd need to look into it.
Rastin Mehr

Rastin Mehr shared a note

This week's focus will be studying more advanced #ReduxJS design patterns used in production level apps. Also studying ways to incorporate React, Redux, and Material Design in Anahita architecture.... Read More
This week's focus will be studying more advanced #ReduxJS design patterns used in production level apps. Also studying ways to incorporate React, Redux, and Material Design in Anahita architecture. Read Less
Rastin Mehr

Rastin Mehr shared a note

A good list of websites using #ReactJS https://github.com/facebook/react/wiki/sites-using-react they make conventional php/jquery websites look very humble
Rastin Mehr

Rastin Mehr shared a note

This week's focus: studying http://www.material-ui.com code and overviewing ReduxJS examples. Also ways that files are organized and managed in javascript apps.
Rastin Mehr

Rastin Mehr shared a note

You know how I favour many-to-many relationships over one-to-many? In modern frameworks and libraries composition is favoured over inheritance. In Anahita back-end still quite a bit of inheritance ... Read More
You know how I favour many-to-many relationships over one-to-many? In modern frameworks and libraries composition is favoured over inheritance. In Anahita back-end still quite a bit of inheritance is used, so in the upcoming releases we can reduce the inheritance and move a lot of the methods into behaviours instead. Read Less
Unkown Person liked this
Rastin Mehr

Rastin Mehr shared a note

This week's focus is code reading. Examples of #ReactJS #ReduxJS #MaterialDesign and Anahita patterns for UI data states and UI Design. JQuery seems like a stick and stone technology in comparison ... Read More
This week's focus is code reading. Examples of #ReactJS #ReduxJS #MaterialDesign and Anahita patterns for UI data states and UI Design. JQuery seems like a stick and stone technology in comparison to React and Redux. Read Less
Rastin Mehr

Rastin Mehr shared a note

This week's focus will be studying #ReduxJS documentation, examples, and suggested design patterns. Also contemplating ReduxJS design patterns that would apply to Anahita use case scenarios http://... Read More
This week's focus will be studying #ReduxJS documentation, examples, and suggested design patterns. Also contemplating ReduxJS design patterns that would apply to Anahita use case scenarios http://redux.js.org/ Read Less
Rastin Mehr

Rastin Mehr commented on the topic

Studying comparisons between VueJS and ReactJS

I'm researching the pros and cons of each technology. So far I've found the following links. If you know of any other sources or implementations, please share:

  1. Comparison of VueJS with other framewo...

Read More

I'm researching the pros and cons of each technology. So far I've found the following links. If you know of any other sources or implementations, please share:

  1. Comparison of VueJS with other frameworks: https://vuejs.org/v2/guide/comparison.html
  2. React or Vue: Which Javascript UI Library Should You Be Using? https://medium.com/js-dojo/react-or-vue-which-javascript-ui-library-should-you-be-using-543a383608d
  3. Why we chose Vue.js over React? http://pixeljets.com/blog/why-we-chose-vuejs-over-react/
  4. Vue vs. React https://hackernoon.com/vue-vs-react-254a874d74ab
  5. Have you moved from React to Vue? If so, why? https://www.reddit.com/r/javascript/comments/5fi07s/have_you_moved_from_react_to_vue_if_so_why/

#ReactJS #VueJS

Read Less
We need to look into some good implementations of #MaterialDesign with #VueJS as well
Rastin Mehr

Rastin Mehr started a topic

Studying comparisons between VueJS and ReactJS

I'm researching the pros and cons of each technology. So far I've found the following links. If you know of any other sources or implementations, please share:

  1. Comparison of VueJS with other framewo...

Read More

I'm researching the pros and cons of each technology. So far I've found the following links. If you know of any other sources or implementations, please share:

  1. Comparison of VueJS with other frameworks: https://vuejs.org/v2/guide/comparison.html
  2. React or Vue: Which Javascript UI Library Should You Be Using? https://medium.com/js-dojo/react-or-vue-which-javascript-ui-library-should-you-be-using-543a383608d
  3. Why we chose Vue.js over React? http://pixeljets.com/blog/why-we-chose-vuejs-over-react/
  4. Vue vs. React https://hackernoon.com/vue-vs-react-254a874d74ab
  5. Have you moved from React to Vue? If so, why? https://www.reddit.com/r/javascript/comments/5fi07s/have_you_moved_from_react_to_vue_if_so_why/

#ReactJS #VueJS

Read Less

Photos View All

Articles View All

Topics View All

To-dos View All

Powered by Anahita