switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    upskilling is the key to moving forward
    Upskilling Is The Key To Moving Forward
    Sep 21, 2020
    proritising tasks and skills
    Prioritising Tasks And Skills
    Nov 16, 2020

    Tidy Your Ionic Codebase For The Next Developer To Understand

    Categories
    • Mobile Application Development
    Tags
    • code
    • code spell checker
    • Developer
    • document this
    • document your code
    • ionic
    • prettier code formatter
    • racket pair colorizer
    • typescript hero
    • visual studio code
    • vscode
    tidy your ionic codebase for the next developer to understand
    tidy your ionic codebase for the next developer to understand

    Introduction


    This post is geared towards developers working on production apps that are managed by more than one team member or perhaps will at some point be handed over to a team or another developer.

    During development cycles, libraries get added to the project and end up getting replaced by alternatives for various reasons.

    References to those libraries and dependencies are left behind to blot the project with a large node modules folder and in worse cases loaded and start time and never get used anywhere else in the project

    In this post, I will share tips on how to keep your ionic project free of unused dependencies and imports as well as share some VS code plugins that I have used to make documenting your ideas while you are doing the actual coding more approachable.


    Clean your package.json


    This file is the gatekeeper of unwanted dependencies making their way into your project. Keeping this file up to date with the state of the project is essential. The issue with js libraries is that they themselves depend on other packages, which in turn depend on other packages . . . , you get the picture. Actually here is the picture.

    This is the dependency tree of the jquery library inclusive of its devDependencies for illustration dependency Tree
    Well developed libraries will make it such that only dependencies necessary for use are installed when you run npm i . However, not all libraries are well developed. If you make the decision to install a library and later replace it. It is essential to ensure it is no longer referenced in the package.json file of your project.


    Remove unsed imports and Code



    The above shows an example where Storage is imported but never used

    1.) Used import Statements

    Thanks to Typescript's tslint tool, you can easily identify places in your code where you import code and do not end up using it. when ionic serve is run, you will see a log in the terminal, usually as a warning message notifying you that you have unused imports.

    In some worse cases, dependency injection on unused imports is performed, this causes the imported code to be run when that page or component is invoked. This results in slow-running apps or broken apps when that code is updated by its developers.

    Typescript Hero is a really useful plugin that can be used to sort and organize imports as well as remove used import statements from your project. This will result in a much cleaner project where you will be able to tell which files are brought from core framework packages, third party libs, and local project files.

    tshero
    TsHero plugin

    2.) Used Code

    When there are multiple devs working on a project, or when another developer has to take over a project entirely. It becomes very confusing when chunks of commented out code are left behind with no explanation of whether this code is non-essential or is only for a specific purpose. As a good practice, when you push your code to the project's version control system, ensure only working and tested code is pushed.


    Document your code


    documentation-where-were-going-we-dont-need-documentation

    It's no secret that most developers have the I'll do it later habit when it comes to code documentation, but take a second to think about this. Would you rather... It's an easy choice, doing it now rather than later is most probably the best option.

    Documenting your codebase does not only help your team members, it helps you first. when a critical bug happens, it is very easy to search for a bug through code you can easily understand.

    Some developers, especially junior developers, might be discouraged from writing documentation because senior developers often use very technical language to describe their workflows. This is not wrong, at the same time not a predefined way to write docs. What makes good documentation is how well you are able to understand or explain it to someone else.

    I recommend using a VScode plugin called Document this , for ionic projects, it does the hard work by generating code docs for your functions. It helps structure how you write your docs making them look more professional by outlining the return types, function parameters, adding a reference to the class in which the function is defined, and more.


    VSCode plugin recommendations


    Here is a list of some VsCode plugins to assist in your effort to make write cleaner code.

    1) Document This: https://marketplace.visualstudio.com/items?itemName=oouo-diogo-perdigao.docthis

    2)TypeScript Hero: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

    3)Prettier - Code formatter: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

    4) Bracket Pair Colorizer: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
    This plugin helps identify where code blocks start and end to help you indent your code better and get a better scope context.

    5) Code Spell Checker: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
    What do you know, spelling words correctly actually helps people understand your work better. :p


    Conclusion


    Writing clean code that is well documented should an enforced practice that is being constantly refined to help software development teams collaborate better. Different teams abide by different standards so what is written here may not satisfy the parameters set by your team lead but hopefully points you in a good direction. Thanks for reading.

    Contact us


      Related posts:

      benefits of developer journal5 Benefits Of Having A Developer Journal laravel livewireLaravel Livewire dynamic doughnut graph using laravel vue componentDynamic Doughnut Graph Using Laravel Vue Component how to create and digitally sign a pdf using laravel and tcpdfHow To Create And Digitally Sign A PDF Using Laravel And TCPDF
      Share
      80
      Ronald Hove
      Ronald Hove

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165


      switchon@lavalamp.biz


      Unit 4 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy