SS4 build tooling now documented

[Ingo Schommer]

Hey everyone!

We're progressing towards a shiny new ReactJS frontend in the SilverStripe 4 CMS (campaigns and assets sections). Which means more build tooling! We're put Gulp/Browserify in place, and packaged it all up with some NPM aliases. 

If you plan to contribute to the SS4 frontend dev, please check out our new build tooling docs.

It's a great opportunity to learn some ReactJS, get involved with CSS architecture on a large scale, as well as dip your toe into Flux/Redux state management.

Thanks

Ingo

[Michael van Schaik]

Seems I have some learning to do! I've just tried to find in the docs what would be the best way to require a front-end dependency from a module. I've found it should be done using NPM, but I have no clue how or where to start.

Is there documentation or a steb-by-step howto available yet that explains this process? 

Or maybe someone can point out a module that's already been updated to use npm the correct way?

--
You received this message because you are subscribed to the Google Groups "SilverStripe Core Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to silverstripe-d...@googlegroups.com.
To post to this group, send email to silverst...@googlegroups.com.
Visit this group at https://groups.google.com/group/silverstripe-dev.
For more options, visit https://groups.google.com/d/optout.

[Anselm Christophersen]

npm install —save DEPENDENCY ?

But yes, I’ve myself had a look at the framework and cms modules respectively, and it seems even they are doing things differently (and have duplicate code inside of their gulp files). I for that matter, I had issues how to create a module, and properly require jQuery as an external dependency, so I’d also like to see some sort of starter module that has some barebone recommended build processes in place for creating an own module. This would also be a great kickstarter for any normal project where you’d like to use similar build tools.  

[Michael van Schaik]

PS; I did go through this: https://github.com/silverstripe/silverstripe-framework/blob/master/docs/en/05_Contributing/01_Code.md#npm

What's not clear to me is how you can/should declare front-end dependencies in a module. I expect there to be some way to do this, so that after installing a module using composer, you'd run "npm update" or "npm install" somewhere, and the dependencies (which may be shared across modules), will be installed in site_root/node_modules/ ?

Composer has an option to declare front-end dependencies what will in fact get installed in site_root/components/, guess I'm looking for the equivalent of this in npm(?)

​Vriendelijke groet,

Michael van Schaik

(Niet aanwezig op donderdagen)

​​m...@restruct.nl

+31 71 203 2127

Oude Singel 14
NL-2312 RA Leiden

[Ingo Schommer]

Hey Michael, Anselm,

Thanks for checking out SS4, I'm very keen to hear more feedback like this. Sorry for the late response, it's hard to balance SS4 dev with community engagement sometimes - so much to do! :)

> I had trouble properly requiring jQuery as an external dependency

Just to be clear, there's no need to use the SS4 build tooling for your own project code or modules, unless they add CMS UI functionality. You can base your own project build toolchain on NPM of course, but that should pull in jQuery separately. There's a small amount of SS form fields which might pull in their own dependencies that you could use on your own website (e.g. DateField.js), although I don't think they're widely used. If you still think you have a use case for pulling in the core jQuery NPM dependency, we've documented the necessary browserify external() use. I've tried to clarify the intended use a bit in a docs pull request.

It's a bit hard to keep docs relevant and straightforward since we'll still have Entwine/PJAX code in 4.0 stable, sitting alongside ReactJS.

We've tried to mark these docs as deprecated where possible. Let us know if there's any places where you think this should be clearer.

The docs referring to ReactJS are a bit scattered, there's different learning paths where you need varying levels of details:

https://github.com/silverstripe/silverstripe-framework/blob/master/docs/en/04_Changelogs/4.0.0.md

https://github.com/silverstripe/silverstripe-framework/blob/master/docs/en/05_Contributing/01_Code.md

https://github.com/silverstripe/silverstripe-framework/blob/master/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/02_CMS_Architecture.md

https://github.com/silverstripe/silverstripe-framework/blob/master/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/How_Tos/Extend_CMS_Interface.md

> I’ve myself had a look at the framework and cms modules respectively, and it seems even they are doing things differently (and have duplicate code inside of their gulp files).

We've heavily iterated on the Gulpfile and browserify setup, which shows in a few inconsistencies between modules at the moment.

This could be abstracted into a shared NPM dependency with some predefined Gulp tasks - see https://github.com/silverstripe/silverstripe-framework/issues/5454. 

I'm hesitant to over-optimise this at the moment. The external() system is pretty fragile (very easy to include imports in two different bundles), and there's way too much boilerplate.

So that'll probably need a deeper look in how we manage that. I've written up a ticket - it's ... complicated: https://github.com/silverstripe/silverstripe-framework/issues/5601

Anybody keen to write their first browserify plugin, or go hunting for an existing one? :)

Ingo