Noob advice needed : the better way to organize an ionic project

1

Hi guys,

its my first app-dev project, i didn’t know anythings about html5, javascripts and everythings about the developpement of any mobile application now with our help (thanks all!) my first app is going to life and i wonder what is the better way to organize the project, i explain :

i followed the “user template project”, with an empty index.html (just for loading all css, script etc) and a nav-view.
All my views (30+ html files) are in a /templates folder and i have one controller file by controller into a controller folder inside scripts folder.

Is it the right way ? i’ve read somewhere in the forum that for performance issue its better to have everythings into index.html, calling pages by script tag.

What is the better way to organize a project ? separates html and controller is a problem, or not ?

thank you for advices

2

Hey i can explain to you my project structur:

root
  - app
      - controller
          - Authorization
              - Registration.js
              - Login.js
          ....
      - service 
      - template
   - lib
      - ....
   - resources
      - sass
      - css 
   index.html
   config.xml

It depends how complex your app is.
This is a structure of a real complex app. so i grouped it by “classes” or “models”.
You could group controller into subfolders via states or views.

I am not a friend of puttung everything in 1 file… in a company you have to establish a workflow or programming guidline every should follow. And to better understand and encapsulate functionality we ended up there.

3

Lately their has been a shift in the preferred (or most popular) way projects are organized. You could follow (in my opinion) best out of the two following approaches:

Note that my examples assume you want only the strcuture inside your app’s www folder. Obviously file names are for functionality only :wink:

##Approach #1
Structure your files by “type”. This would be like:

  • js
    • controller
      • ctrl_page1.js
    • service
      • svc_1.js
  • templates
    • tpl_page1.html
  • lib
  • resources
    • css
    • img
  • index.html
  • config.xml

This is the way that is used in most ionic and angular examples and documents.

##Approach 2 - Personal favorite
Structure your files by functionality. This has the benefit of grouping all code used by one functionality in one place. It is often the case in my project that when I work on one controller, I also work on the corresponding template. It’s very nice to have those files close together in my project structure. Also, the shift in time is mostly from approach 1 to 2, and I’ve read somewhere that ionic team is also considering moving towards this structure

This would be like:

  • js
    • funcitionality1
      • ctrl_funct1_page1.js
      • tpl_funct1_page1.js
      • svc_funct1_data.js
  • lib
  • resources
    • css
    • img
  • index.html
  • config.xml

##General
Keep in mind that it is always very useful to prefix your files with what they are, for example ctrl for controllers, tpl for templates, and (in my example) svc for services (I don’t really like the svc shorthand and have never seen anyone use it before, just couldn’t think of anything better)

I think that if you apply to either of above approaches you will have a nice structure, but you could really do it as you want, just document the way you do it for future contributors or reviewers in your company :wink: Also, keep it consistent whatever you choose to do :wink:

4

Ok guys thank you for answer, thats pretty close of what i did.
I started from yeoman ionic, the structure is like that :

everythings i need is into app folder

app
    - fonts

    - images

    - lib

    - scripts
       - controllers
         * each controllers are here
       app.js
       config.js
       directives.js

    - styles
        main.scss
        myapp.css (all css i need to override is copy/cut and modify in this file)

    - templates
       here is all my html pages (every one, i have 30 pages)

     index.html

then, it’s looking good to separate each html pages ? there is no performance impact ?
I say that because it’s a bit laggy on my nexus5 when i switch to a page with a list of contacts (i have only 10 items), looking good on browser

and by the way when my app is done, there is ways to optimize it ? the app is compiled by grunt, and i have nothing more to do

5

Yesss, something very important that I planned to, but forgot to mention in my last answer!

Phonegap applications in general have a terrible caveat, which is what makes angular and ionic so great in combination for me. (This was one of my top requirements in framework selection and ionic was the only one that complied!)

Phonegap applications basically has two sets of memory - for this explanation at least. The DOM memory and the javascript memory. DOM memory is filled with elements that you keep in the DOM, the bigger your html file, the more memory it will take. Phonegap handles javascript memory much better then DOM memory! So even caching your DOM elements in javascript and removing them from the DOM could damatrically increas your app performance (I’ve actually seen 30 times reaction speed improvements on regular sized apps! Those weren’t done with ionic or angular though)

On the other end, the more items in the DOM, the more items will have to be procesed to finish a repaint event. Repaint events basically happen every time you click a button, every time your view changes actually, every touch, scroll, tilt, etc etc etc. Basically, every user interaction… Problem: user interaction is just the moment when you WANT that performance best.

So that sums up, the less elements in the DOM, the better your app will perform. Although there is a slight change in this because angular templates need to be processed and the scope has to be applied, the caching meganism that ionic will be providing in the near future will help to select certain pages that will perform better if they are cached, thus improving your performance for those specific pages. Think about large lists (ng-repeat in particulair). I would however prefer ionic to defaultly disable caching for above reasons.

I’ve gained my knowledge at a phonegap conferention and someone speaking with pretty much authority to speak about things in phonegap areas, but forgot who it was and what his job/role was :wink: Anyways, in my experience it was truth… If proven with statisctics that there’s a better way, but my statisctics so far proved above statements :slight_smile:

6

As a side note, you could improve your app’s size (users will be thankfull for using less storage space) and performance by minifying your javascript and css files, referencing the minified versions and only including the minified versions in your packaged app :slight_smile: Also make sure you don’t add any files your app doesn’t actually use, this is just a waste of package size (think about unused images, sass files (only the compiled and minified css should be interesting for your app etcetera)

7

I’ve updated to beta 14… and “woaw” good job guys !!
The new cache system litteraly transcend my app from “laggy” to “smooth”, and the laggy list problem i had is gone (i’m lucky to start it now :smile:

i will see when i’m done where i can do some optimizations, i think some apps dev before beta14 aimed to be fluid as well