JavaScript & CSS Development Workflow
Download as PPTX, PDF0 likes168 views
This document discusses workflows for JavaScript and CSS development in OutSystems. It notes that JavaScript and CSS changes often require many small tweaks, and publishing/republishing takes extra time. It recommends using browser debugging tools like the Styles, Computed, Console, and Sources tabs to understand CSS and JavaScript behavior without needing to republish. Additionally, it cautions developers to be aware of JavaScript and CSS loading order, avoid duplicating files, and keep common code in shared locations.
JavaScript & CSS Development Workflow
- 1. | JavaScript & CSS Development Workflow JavaScript & CSS Workflow
- 2. | JavaScript & CSS Development Workflow| JavaScript & CSS Development Workflow Justin James Chief Architect | Cloud Development Resources @ in justin.james@clouddevelopmentresources.com /jmjames
- 3. | JavaScript & CSS Development Workflow| JavaScript & CSS Development Workflow JavaScript and CSS are tough enough...
- 4. | JavaScript & CSS Development Workflow … but the way we work within OutSystems makes it slower: ● JavaScript and CSS changes are often a matter of a lot of small tweaks ● Stopping to publish and re- publish – especially when the JavaScript or CSS is in a producer module – takes a lot of extra time
- 5. | JavaScript & CSS Development Workflow| JavaScript & CSS Development Workflow Context is king!
- 6. | JavaScript & CSS Development Workflow ● OutSystems loads style sheets and JavaScript, in a very particular order ● IDs sometimes change, especially after an AJAX refresh ● AJAX refresh is important ● Tools like JSFiddle are often not as useful as we might hope for
- 7. | JavaScript & CSS Development Workflow| JavaScript & CSS Development Workflow CSS Workflow
- 8. | JavaScript & CSS Development Workflow F12 F12 F12: ● Learn to use the “Styles” and “Computed” tabs under “Elements” to find the source of “why this looks the way it does” ● Roundtrip to Service Studio ● Stylesheet load order, it is not always intuitive, you may need to be very specific in your selectors or add classes
- 9. | JavaScript & CSS Development Workflow| JavaScript & CSS Development Workflow JavaScript Workflow
- 10. | JavaScript & CSS Development Workflow F12 Redux: ● The “Console” tab is awesome ● The “Sources” tab lets you see the contents of the JavaScript ● Learn the debugger! ● Roundtrip back to Service Studio
- 11. | JavaScript & CSS Development Workflow Beware: ● Try not to include too many JS resources ● Put common JS in a common location ● Do not replicate JS files in many places
- 12. | JavaScript & CSS Development Workflow Thank You! @ injustin.james@cloudd evelopmentresource s.com /jmjames