Welcome to Cosmoz Frontend Development documentation!

Introduction

• Development environment
  • Google Chrome / Chromium *
  • Visual Studio Code (vscode) with extensions *
  • NodeJS *
  • NPM *
  • Bower *
  • Yarn *
  • Git *
  • Time
  • Optional software
• Element separation
• Application guidelines
  • Automation and efficiency
  • AI, machine learning, user teaching
  • Simplicity
  • Specificity
  • Device agnostic
  • Customizability
  • Challenging
  • Performant
  • Exact UI state
• Coding guidelines
  • ESLint
  • JavaScript compatibility
  • Polymer data binding
• Supported platforms

Public elements

• Repository setup
  • Creating a repository
  • Required files in a public element component repository
  • License
  • Integrations
  • The Cosmoz elements collection
• Dependency management
  • Dependency definition files
  • package.json
  • bower.json
  • Dependency versioning and naming
  • Installing component dependencies
  • Updating component dependencies
  • Installing demo/dev dependencies
  • Bower link
• Working with public elements
  • Development
  • Testing
  • Documentation
• GitHub and git
  • Basic git usage
  • Configuration of git repositories
  • Enable two-factor authentication setup for GitHub
  • Command line two-factor authentication for GitHub
  • Submitting changes to GitHub
• Automatic testing and building
  • Travis-CI
  • Travis-CI + Sauce Labs
• Versions and releases
  • Changes driving versions
  • Version milestones
• Webcomponents.org

Working with the frontend

• Repository setup
  • Get Developer role
  • Get the code
  • Add a commit hook
  • Add a pre-commit hook
  • Install development tools and dependencies
  • Update dependencies
• Working with the code
  • Dependency management
  • Start the editor
  • Set the backend
  • Start the web server
  • Login in to alpha and beta
  • URL format
  • Linting in Visual Studio Code
  • Linting with Polymer
  • Linting with ESLint
  • Local documentation for private components
  • System documentation
• Git
  • Pull Requests (PRs)
  • Deployment and branches
• Continuous integration and deployment
  • Continus integration
  • Deployment
• Next git flow
  • Create regular pull request for master
  • Make sure next is rebased on master
  • Create pull request for next
  • Assign next pull request to testing
  • Testing team review work procedure
  • Additional fixes through pull requests
  • When testing approves the change, merge the original pull request to master
  • If needed: Reset next
  • Running experimental public components in next only

Application architecture

• Bootup and application start
  • Core loading phase
  • boot / start / cz-start
  • cz-start
  • Backend config
  • Backend override
  • cz-login-screen
  • cz-application
• cz-application
  • cosmoz-page-router
  • URL / View structure
  • cz-mainmenu
  • cosmoz-viewinfo
  • The cz namespace
  • Translations
  • Theming
• Application states
  • App state
  • URL app state

Application views

• View overview
  • View imports
• View loading / switching
  • View lifecycle events / aspects
  • View loading timeline
  • View setup / activation
• Styling views
  • page-header
  • page-sub-header
• Different types of views
  • “*-core”-type views
  • “Add”-type views
  • “List”-type views
  • “List-queue”-type views
  • “View/edit”-type views
• View components
  • cz-apicall
  • cz-apicall-batch
  • cosmoz-bottom-bar
  • cosmoz-bottom-bar-view
  • cosmoz-data-nav
  • cosmoz-tabs
  • cosmoz-omnitable
  • cz-history
• Omnitable setup
  • Column defintions
  • Omnitable search (OTS)

Other

• Troubleshooting
• Glossary
• TODO

Indices and tables

• Index
• Module Index
• Search Page