How any web app or mobile app should be coded in 2022.

WOLFx Digital Agency is an Advanced Development & Design Agency located in the financial capital of India, Mumbai. Our specialization is multifaceted in everything related to technology; we have created many digital products and services that serve many different industries. Tourism, Event Organisation, Ecommerce, Pharmaceutical, Interior Designing, Gig Economy, Software as a Service, Real Time Chat, are some of the domains we have worked in. 

Our motto is to empower businesses by digitizing their major & minor business operations so that they can get more time to enhance their products, services and offerings which in turn promotes growth and increases profits.

We make scalable, robust and the most advanced websites, web applications and mobile applications using the latest industry standards that will ease your user’s life, so that the final results you receive will last for decades to come.

Our Technological Proficiency

1. Web Technologies
   1. Front End
      1. HTML
      2. CSS
      3. JS/Jquery
      4. React JS
      5. WebGL using Three.js
      6. Tween Max
   2. Back End
      1. Programming Language
         1. Python
         2. Javascript
         3. C/C++
      2. Frameworks
         1. Django
         2. Other experimental frameworks include NodeJS, ASP .NET
      3. Database 
         1. PostGreSQL
         2. MYSQL
         3. MongoDB
         4. MariaDB
         5. DBSqlite3
      4. Other subsequent technology
         1. Redis - For caching and real time applications
         2. Supervisor - For deployment
         3. Gunicorn - Django web application upstream server
         4. Docker.
         5. Kubernetes.
2. Mobile App Technologies
   1. Convertron.app a solution we made which converts any website into a mobile app.
   2. React Native
   3. Flutter
   4. Android Native
      1. Java
   5. IOS Native
      1. Swift
3. Server Technologies
   1. Web Server
      1. NGINX Web Application Deployment.
      2. NGINX Reverse Proxy.
      3. NGINX Load Balancing.
      4. NGINX RTMP.
      5. NGINX Video On Demand.
   2. Ubuntu Linux (All our deployments are in Ubuntu)
   3. VPS, Cloud and other services we have worked with.
      1. AWS
         1. EC2
         2. S3 Storage
         3. AWS RDS
      2. Digital Ocean
         1. Droplets
      3. Vultur
      4. Heroku (Experimental: To implement staging server for django apps)
      5. Cloudinary

Our Django Best Practices

Django web framework is our goto web framework because it allows us to quickly prototype and sprint huge requirements. We have studied a lot of open source django projects and have even written directly into the source code of some django packages. These practices have allowed us to make some development principles of our own. These principles allow us to write reusable, robust and clean code.

We believe.

1. In Django, business logic should live in:
   1. Model properties (with some exceptions).
   2. Model clean method for additional validations (with some exceptions).
   3. Services - functions that take care of writing to the database.
   4. Selectors - functions that take care of fetching from the database.
2. In Django, business logic should not live in:
   1. APIs and Views.
   2. Serializers and Forms.
   3. Form tags.
   4. Model save method.
3. In Django, our main web app is always named “web”.
4. In Django, our main api app is always named “api”.
5. In Django, all dependencies are to be separately installed inside it’s respective python virtual environment, which will be unique to all projects.

Our Frontend Development Best Practices

We have proficiency in a lot of modern front end development frameworks, due to our strong understanding of the basics. Our primary tools to deliver front end websites are React, Angular and Vanilla HTML/CSS. 

Due to our experience in these technologies we constantly experience an evolution of our coding habits to match-up with npm packages and ECMA updates, to deliver a cross browser compatible, responsive and fast html pages.

We also deliver AMP Pages/Stories a relatively new standard introduced by Google which heavily focuses on mobile optimized delivery

These are our goto design and development philosophies for all of our front undertakings.

1. Directory structure
   1. We follow a directory structure for all our static files, assets files, media files, plugins and base code (html/module/src)
2. Leveraging CDN:
   1. Our motto is to reduce as much load from the application servers to serve the front end/representation layer. For that purpose we encourage the use of CDN(s) to load network resources like jquery, three.js, or any other resources that require network calls.
   2. Our deployment practices can also help in delivering static and media files quickly.
   3. We also have experience in using 3rd party media services.
3. Semantic Preferences.
   1. The front end code always uses the best tags/semantics made for that specific purpose.
   2. We use a variety of html tags for a cleaner and much more readable code, that not only helps the developers but also optimizes the website for web crawlers (Good SEO).
      1. Our primary wireframing code consists of the below listed tags.
         1. <header> : All site heading lives in this tag
         2. <nav> : For navigation menus
         3. <section> : For parent sections to hold a specific portion of the website
         4. <article> : Mainly for blog cards
         5. <figure> : For sliders, gallery pages, maps, etc
         6. <footer> : All footer data lives in this tag
         7. <div> : Generic block elements
         8. <span> :  Generic inline elements
   3. CSS Naming:
      1. We use hyphen separated notations in our css classes and id’s.
   4. JS Naming:
      1. We use camelCase notations for our javascript codes.
4. Reusability:
   1. Our primary css code which consists of all the visual hierarchies, font definitions, header and footer definitions are separate from other widgets.
   2. Our primary css code which consists of all the form elements reside in a separate file.
   3. Our focus on writing a standardized script mainly emphasis on creating modules/methods/functions to avoid redundant code.
      1. We create classes to hasten up the execution speed of animated/interactive elements.
      2. All the elements of similar interactivity are treated as an object.
   4. The advantage of reusable code are
      1. Increases development time
      2. Increases code execution speed
      3. Reduces load speed
      4. Debugging becomes easy
      5. Iterations are scalable
5. Custom Form Widgets:
   1. We have a few preferred choice of libraries for form widgets, that allows a foundation to expand into customizing native html elements.
   2. There are certain standard sets of plugins used by us from which we can quickly build upon to create magnificent results, which include customized alerts, modals and popups.
6. Commenting Preferences:
   1. Our HTML and Javascript codes are commented during the development phase.
   2. On deployment we prefer minified versions of the code to reduce load time and avoid any “implementation how-to” details.
7. 3D asset/VR implementation
   1. Our preferred choice of model format is GLTF because it allows lossless compression of heavy 3d files.
8. More Preferences
   1. We use ES6+ features.
   2. Our frontend assets have a lazy loading implementation.
   3. For Angular and React we use TypeScript.
   4. We implement caching mechanisms for less important api calls.
   5. We document and perform code reviews on regular basis.
   6. Production and Staging environments are seperate.
   7. Async part of the code like webrtc & websocket implementation is kept in a separate file/app module.